/* ===== RESET & BOX MODEL ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 100%;
}

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
  --color-link:    #FF6600;
  --color-hover:   #FF8548;
  --color-text:    #1E3032;
  --color-header:  #575E5E;
  --color-bg-edge: #1C1C1C;

  --box1-bg:   #724335;
  --box1-text: #BAA29B;
  --box2-bg:   #BF6B45;
  --box2-text: #DAAF9E;
  --box3-bg:   #FF8B4B;
  --box3-text: #FFDBC8;
  --box4-bg:   #2A352F;
  --box4-text: #959A97;
  --box5-bg:   #E4E7D7;

  --card-radius: 6px;
  --card-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* ===== BASE ===== */
html, input, textarea {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.75em;
  line-height: 1.4;
  color: var(--color-text);
}

body {
  text-align: center;
  background-color: var(--color-bg-edge);
  background-image: url(images/page-tail.gif);
  background-position: center top;
  background-repeat: repeat;
}

img {
  vertical-align: top;
  max-width: 100%;
  height: auto;
}
a img { border: 0; }

a {
  text-decoration: underline;
  font-weight: bold;
  color: var(--color-link);
}
a:hover { text-decoration: none; }

p { padding-bottom: 14px; }

table { border-collapse: collapse; border: 0; }

input, select { vertical-align: middle; font-weight: normal; }

/* ===== HEADER ===== */
.header-bg {
  background: url(images/header-bg.jpg) center top / min(1200px, 100%) auto no-repeat;
}

/* Fix: inner pages override background-image but not repeat; this covers all of them */
body[style*="comic_background"] {
  background-repeat: no-repeat;
}

#header {
  height: 305px;
  color: var(--color-header);
}

/* Contain floated logo without adding extra height */
header::after {
  content: '';
  display: block;
  clear: both;
}

.logo {
  float: left;
  padding: 2px 0 0;
}

.rss { float: right; padding: 77px 17px 0 0; }

.info { font-size: 0.833em; padding: 11px 0; margin: 0 -6px 0 0; }
.date { float: left; }
.nav  { float: right; padding: 2px 5px 0 0; }
.nav li { float: left; border-right: 1px solid #575E5E; padding: 0 7px 1px; background: none; margin: 0; }
.nav .extra { border: none; padding-right: 0; }
.nav li a { color: #575E5E; text-decoration: none; }
.nav li a:hover { text-decoration: underline; }

/* ===== NAVIGATION ===== */
.menu { background: #000; position: relative; }

.menu-toggle {
  display: none;
  width: 100%;
  background: #000;
  color: #fff;
  border: none;
  font-size: 1.4em;
  padding: 10px 16px;
  text-align: left;
  cursor: pointer;
}
.menu-toggle:hover { color: var(--color-hover); }

.menu ul {
  display: flex;
  list-style: none;
}

.menu li {
  flex: 1;
  text-align: center;
  border-right: 1px solid #333;
  padding: 0;
  margin: 0;
  background: none;
}
.menu li:last-child { border-right: none; }
.menu .extra { border-left: none; }

.menu li a {
  display: block;
  text-transform: uppercase;
  color: #fff;
  font-weight: bold;
  font-size: 0.917em;
  font-family: 'Trebuchet MS', Helvetica, sans-serif;
  padding: 16px 8px;
  text-decoration: none;
  background: none;
}
.menu li a:hover { color: var(--color-hover); }

/* ===== STORY PAGE PANELS (david, esther, gideon, christmas) ===== */
.story-panels {
  display: flex;
  gap: 0;
  align-items: stretch;
  background: #E4E7D7;
  border-radius: 6px;
  box-shadow: var(--card-shadow);
  margin: 16px 10px 10px;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
}

.story-panel { padding: 22px 20px; flex: 1; }
.story-panel.side { flex: 0 0 200px; background: #d8dcc8; text-align: center; }
.story-panel.center {
  border-left: 1px solid #c8cbb8;
  border-right: 1px solid #c8cbb8;
}

.story-panel h2 {
  font-size: 0.85em;
  color: var(--color-hover);
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.story-panel h3 {
  font-size: 1em;
  color: var(--color-link);
  margin-bottom: 10px;
  font-weight: bold;
  text-transform: uppercase;
}

.story-panel p { margin-bottom: 12px; }
.story-panel p:last-child { margin-bottom: 0; }

.story-panel ul { margin-bottom: 16px; list-style: none; }
.story-panel ul li { margin-bottom: 8px; background: none; padding: 0; line-height: 1.4; }
.story-panel ul li a { color: var(--color-link); font-weight: bold; text-decoration: none; }
.story-panel ul li a:hover { text-decoration: underline; }

.story-panel img.panel-img  { max-width: 100%; height: auto; border-radius: 3px; margin-top: 8px; }
.story-panel img.cover-img  { max-width: 160px; height: auto; border-radius: 3px; box-shadow: 0 2px 8px rgba(0,0,0,0.25); margin-bottom: 12px; }
.story-panel img.header-img { max-width: 100%; height: auto; border-radius: 3px; margin: 0 auto 14px; display: block; }

.pdf-download {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #d0d4be;
  border-radius: 4px;
  padding: 10px 14px;
  margin: 14px 0;
}
.pdf-download img { flex-shrink: 0; }
.pdf-download a { color: var(--color-link); font-weight: bold; text-decoration: none; font-size: 0.9em; }
.pdf-download a:hover { text-decoration: underline; }

.adobe-note { font-size: 0.82em; color: #555; }
.adobe-note a { font-weight: normal; }

@media (max-width: 700px) {
  .story-panels { flex-direction: column; }
  .story-panel.side { flex: none; }
  .story-panel.center {
    border-left: none;
    border-right: none;
    border-top: 1px solid #c8cbb8;
    border-bottom: 1px solid #c8cbb8;
  }
}

/* ===== MODERN STORY GRID (index.html) ===== */
.story-grid {
  display: flex;
  gap: 10px;
  padding: 16px 10px 10px;
}

.story-card {
  flex: 1;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-inner {
  padding: 20px 16px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.card-inner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}

.card-link {
  margin-top: auto;
  padding-top: 18px;
  font-size: 0.917em;
  width: 100%;
}

.card-link a {
  color: #fff !important;
  font-weight: bold;
  text-decoration: none;
  padding-left: 12px;
  position: relative;
}
.card-link a::before {
  content: '\203A';
  position: absolute;
  left: 0;
  font-weight: normal;
}
.card-link a:hover { text-decoration: underline; }

.story-card.box1 { background: var(--box1-bg); color: var(--box1-text); }
.story-card.box2 { background: var(--box2-bg); color: var(--box2-text); }
.story-card.box3 { background: var(--box3-bg); color: var(--box3-text); }
.story-card.box4 { background: var(--box4-bg); color: var(--box4-text); }

/* Welcome / intro box */
.welcome-box {
  margin: 0 10px 10px;
  padding: 18px 24px;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  text-align: center;
}
.welcome-box.box5 { background: var(--box5-bg); }
.welcome-box p { padding-bottom: 0; }

/* ===== LEGACY LAYOUT UTILITIES (used by other pages) ===== */
.wrapper  { width: 100%; overflow: hidden; }
.wrapper2 { width: 100%; }

.float-l { float: left; }
.float-r { float: right; }
.clear   { clear: both; font-size: 0; line-height: 0; height: 0; }

.col-1, .col-2, .col-3, .col-4 { float: left; }

.img-indent { float: left; margin-right: 23px; }
.phone { float: right; margin-right: 5px; }
cite { font-style: normal; }

.col-1 .text { padding-right: 20px; }
.col-2 .text { padding: 0 20px 0 21px; }
.col-3 .text { padding-left: 21px; }
.col-2 .col-1 { padding-right: 37px; }
.col-2 .float-l { padding-right: 28px; }

/* ===== LEGACY BOX STYLES (used by other pages) ===== */
.boxs {
  background: url(images/boxs-tail.gif) left bottom repeat-x;
  padding-bottom: 11px;
  margin-bottom: 10px;
}
.boxs .inner { padding: 24px 10px 29px 19px; }

.box1 { background: #724335 url(images/box1-bot.gif) left bottom repeat-x; color: #BAA29B; }
.box1 .box-left      { background: url(images/box1-left.gif) left top repeat-y; }
.box1 .box-top       { background: url(images/box1-top.gif) left top repeat-x; }
.box1 .box-right     { background: url(images/box1-right.gif) right top repeat-y; }
.box1 .box-top-left  { background: url(images/box1-top-left.jpg) left top no-repeat; }
.box1 .box-top-right { background: url(images/box1-top-right.jpg) right top no-repeat; }
.box1 .box-bot-left  { background: url(images/box1-bot-left.jpg) left bottom no-repeat; }
.box1 .box-bot-right { background: url(images/box1-bot-right.jpg) right bottom no-repeat; width: 100%; }
.box1 strong         { color: #B09C96; }

.box2 { background: #BF6B45 url(images/box2-bot.gif) left bottom repeat-x; color: #DAAF9E; }
.box2 .box-left      { background: url(images/box2-left.gif) left top repeat-y; }
.box2 .box-top       { background: url(images/box2-top.gif) left top repeat-x; }
.box2 .box-right     { background: url(images/box2-right.gif) right top repeat-y; }
.box2 .box-top-left  { background: url(images/box2-top-left.jpg) left top no-repeat; }
.box2 .box-top-right { background: url(images/box2-top-right.jpg) right top no-repeat; }
.box2 .box-bot-left  { background: url(images/box2-bot-left.jpg) left bottom no-repeat; }
.box2 .box-bot-right { background: url(images/box2-bot-right.jpg) right bottom no-repeat; width: 100%; }
.box2 strong         { color: #DAAF9E; }

.box3 { background: #FF8B4B url(images/box3-bot.gif) left bottom repeat-x; color: #FFDBC8; }
.box3 .box-left      { background: url(images/box3-left.gif) left top repeat-y; }
.box3 .box-top       { background: url(images/box3-top.gif) left top repeat-x; }
.box3 .box-right     { background: url(images/box3-right.gif) right top repeat-y; }
.box3 .box-top-left  { background: url(images/box3-top-left.jpg) left top no-repeat; }
.box3 .box-top-right { background: url(images/box3-top-right.jpg) right top no-repeat; }
.box3 .box-bot-left  { background: url(images/box3-bot-left.jpg) left bottom no-repeat; }
.box3 .box-bot-right { background: url(images/box3-bot-right.jpg) right bottom no-repeat; width: 100%; }
.box3 strong         { color: #FFDBC8; }

.box4 { background: #2A352F url(images/box4-bot.gif) left bottom repeat-x; color: #959A97; }
.box4 .box-left      { background: url(images/box4-left.gif) left top repeat-y; }
.box4 .box-top       { background: url(images/box4-top.gif) left top repeat-x; }
.box4 .box-right     { background: url(images/box4-right.gif) right top repeat-y; }
.box4 .box-top-left  { background: url(images/box4-top-left.jpg) left top no-repeat; }
.box4 .box-top-right { background: url(images/box4-top-right.jpg) right top no-repeat; }
.box4 .box-bot-left  { background: url(images/box4-bot-left.jpg) left bottom no-repeat; }
.box4 .box-bot-right { background: url(images/box4-bot-right.jpg) right bottom no-repeat; width: 100%; }
.box4 strong         { color: #949997; }

.box5 { background: #E4E7D7; }
.box5 .box-top-left  { background: url(images/box5-top-left.gif) left top no-repeat; }
.box5 .box-top-right { background: url(images/box5-top-right.gif) right top no-repeat; }
.box5 .box-bot-left  { background: url(images/box5-bot-left.gif) left bottom no-repeat; }
.box5 .box-bot-right { background: url(images/box5-bot-right.gif) right bottom no-repeat; width: 100%; }
.box5 .inner         { padding: 15px 10px 15px 18px; }

.border1 { background: url(images/box5-tail-1.gif) left top repeat-y; }
.border2 {
  background: url(images/box5-tail-2.gif) left bottom repeat-x;
  font-size: 0;
  line-height: 0;
  height: 1px;
  padding-top: 30px;
  margin-bottom: 18px;
}

/* ===== LEGACY LINK STYLES ===== */
.boxs .link a {
  background: url(images/link-marker.gif) left 7px no-repeat;
  font-size: 0.917em;
  color: #FFF !important;
  padding-left: 10px;
}
.boxs .link { margin: 0 3px 0 -3px; padding: 25px 0 0 3px; font-size: 1em; }
.box1 .link { background: url(images/box1-tail.gif) left 4px repeat-x; }
.box2 .link { background: url(images/box2-tail.gif) left 4px repeat-x; }
.box3 .link { background: url(images/box3-tail.gif) left 4px repeat-x; }
.box4 .link { background: url(images/box4-tail.gif) left 4px repeat-x; }

.boxs .col-2 li { background: url(images/list-marker3.gif) 1px 5px no-repeat; }
.boxs .col-2 li a { color: #DBB09F; }
.boxs .col-4 li { background: url(images/list-marker4.gif) 1px 5px no-repeat; }
.boxs .col-4 li a { color: #949997; }

/* ===== TITLES ===== */
.title    { margin-bottom: 19px; }
.title-un { margin-bottom: 20px; }
.box5 .title { margin: 12px 0 21px; }

h2 { text-transform: uppercase; color: #FF8548; }
h2 span { text-transform: none; }

/* ===== LISTS ===== */
ul { list-style: none; }
ul li {
  line-height: 1em;
  background: url(images/list-tail.gif) left bottom repeat-x;
  padding-bottom: 7px;
  margin-bottom: 6px;
}
li a { text-decoration: none; color: #0F1B1C; font-weight: normal; }
li a:hover { color: var(--color-hover); }

.boxs ul { padding: 1px 0 6px; }
.boxs li { margin: 0; padding: 0 0 5px 8px; }
.boxs li a:hover { text-decoration: underline; }

.list1 .extra, .list2 .extra, .list3 .extra { background: none; }
.list1 li a, .list3 li a { background: url(images/list-marker1.gif) 1px 6px no-repeat; padding-left: 10px; }
.list2 li { padding-bottom: 6px; margin-bottom: 7px; }
.list2 li a { background: url(images/list-marker2.gif) left 2px no-repeat; padding-left: 16px; }
.list2 li span { color: #FF8548; }
.list3 li a { text-decoration: underline; }
.list3 li a:hover { text-decoration: none; }

.link     { font-size: 0.917em; }
.link-un  { color: #FF8548; }
.link-un strong { font-size: 0.917em; }

/* ===== FORMS ===== */
#contactForm { padding: 3px 0 0; }
#contactForm input, #contactForm textarea {
  font-size: 1em;
  line-height: 1em;
  border: 1px solid #A7ACA2;
  padding: 1px 0 0 3px;
  color: #1E3032;
  background: none;
}
#contactForm textarea { overflow: hidden; }
.buttons { text-align: right; padding: 24px 2px 0 0; }
.buttons a { margin-left: 10px; }

/* ===== SPACING UTILITIES ===== */
.margin1  { margin-bottom: 19px !important; }
.margin2  { margin-bottom: 21px; }
.margin3  { margin-bottom: 16px !important; }
.padding1 { padding-bottom: 14px; }
.padding2 { padding-bottom: 11px; }
.padding3 { padding-bottom: 21px; }
.padding4 { padding-bottom: 26px; }
.padding5 { padding-bottom: 31px; }
.padding6 { padding-bottom: 37px; }

/* ===== FOOTER ===== */
#footer {
  color: #414D4D;
  padding: 10px 0 50px 19px;
  text-align: left;
}
#footer a {
  background: url(images/footer-tail.gif) left 6px no-repeat;
  padding-left: 7px;
  margin-left: 3px;
  text-decoration: underline;
  color: #FF8548;
  font-weight: normal;
}
#footer a:hover { text-decoration: none; }

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

/* Tablet: 2-column story grid */
@media (max-width: 900px) {
  .story-grid {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 8px 8px;
  }
  .story-card { flex: 1 1 calc(50% - 8px); }
}

/* Mobile */
@media (max-width: 600px) {
  .story-grid { padding: 8px; gap: 6px; }
  .story-card { flex: 1 1 calc(50% - 6px); }

  /* Legacy page column stacking */
  .box5 .col-1, .box5 .col-2, .box5 .col-3,
  .boxs .col-1, .boxs .col-2, .boxs .col-3, .boxs .col-4 {
    width: 100% !important;
    float: none !important;
  }
  .border1  { background: none; }
  .logo img { max-width: 100%; height: auto; }
  .wrapper  { overflow: visible; }
}

/* Mobile nav */
@media (max-width: 768px) {
  .menu-toggle { display: block; }
  .menu ul { display: none; flex-direction: column; }
  .menu ul.open { display: flex; }
  .menu li {
    border-right: none;
    border-bottom: 1px solid #333;
    text-align: left;
    flex: none;
    width: 100%;
  }
  .menu li a { padding: 12px 16px; }
}