/* Randy's Kitchen — polished with proudly old-fashioned instincts. */
:root {
  --cream: #f7f2e8;
  --paper: #fffdf8;
  --brown: #6b3519;
  --brown-dark: #452311;
  --blue: #234e6b;
  --blue-dark: #17384e;
  --ink: #292929;
  --muted: #6b665e;
  --line: #cbbfae;
  --soft-blue: #e7eef2;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #ded9cf;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.58;
}

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

a { color: var(--blue); }

.page-shell {
  width: min(1080px, calc(100% - 28px));
  margin: 22px auto;
  background: var(--paper);
  border: 1px solid #b8afa1;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}

.site-header {
  padding: 18px 30px 0;
  background: linear-gradient(#fffdf8, #f6f0e5);
  border-bottom: 4px solid var(--blue);
}

.logo-link {
  display: block;
  width: min(700px, 100%);
  margin: 0 auto 14px;
}

.logo {
  width: 100%;
  height: auto;
}

.main-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border: 1px solid #9d9488;
  border-bottom: 0;
  background: #eee7da;
}

.main-nav a {
  padding: 9px 24px 8px;
  color: var(--blue-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
  border-right: 1px solid #aaa092;
}

.main-nav a:last-child { border-right: 0; }

.main-nav a:hover,
.main-nav a.active {
  background: var(--blue);
  color: white;
}

main { padding: 26px 30px 42px; }

.featured {
  display: grid;
  grid-template-columns: 58% 42%;
  border: 1px solid var(--line);
  background: #fff;
}

.featured-photo img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

.featured-copy {
  padding: 38px 34px;
  align-self: center;
}

.eyebrow, .category {
  margin: 0 0 8px;
  color: var(--brown);
  font-weight: bold;
  font-size: 12px;
  letter-spacing: .08em;
}

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--brown-dark);
  line-height: 1.15;
}

h1 { margin: 0 0 18px; font-size: 42px; }
h2 { margin: 0 0 12px; font-size: 30px; }
h3 { margin: 0 0 10px; font-size: 23px; }

.dek { font-size: 17px; }

.button {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 16px;
  color: white;
  background: linear-gradient(#315f7b, #204a65);
  border: 1px solid #17384e;
  border-radius: 2px;
  box-shadow: inset 0 1px rgba(255,255,255,.25);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
}

.welcome {
  max-width: 760px;
  margin: 42px auto;
  text-align: center;
}

.welcome p { font-size: 17px; }

.rule {
  width: 110px;
  height: 2px;
  margin: 12px auto 18px;
  background: var(--blue);
}

.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 36px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #f5efe4;
}

.story-photo img, .about-photo img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
}

.story-copy, .about-copy {
  padding: 38px;
  align-self: center;
}

.text-link {
  display: inline-block;
  margin-top: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: bold;
  font-size: 13px;
}

.recipes { margin: 46px 0; }

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 3px double var(--line);
  margin-bottom: 20px;
}

.section-heading span {
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
}

.recipe-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.recipe-card {
  border: 1px solid #bdb3a5;
  background: #fff;
}

.recipe-card > img,
.placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.card-body { padding: 18px; }

.card-body p { margin-top: 0; }

.card-body a {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: bold;
}

.placeholder {
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(35,78,107,.93), rgba(35,78,107,.93)),
    repeating-linear-gradient(45deg, #fff 0 4px, #ddd 4px 8px);
  color: white;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: .04em;
}

.placeholder.chili { background: var(--brown); }

.about { grid-template-columns: 42% 58%; }

footer {
  padding: 26px 30px 20px;
  color: #eee;
  background: var(--blue-dark);
  border-top: 5px solid var(--brown);
  font-size: 13px;
}

footer strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
}

footer p { margin: 4px 0; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 18px 0;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.25);
  border-bottom: 1px solid rgba(255,255,255,.25);
}

.footer-links a { color: white; }

.copyright { color: #c9d3d9; }

@media (max-width: 760px) {
  .page-shell {
    width: 100%;
    margin: 0;
    border: 0;
  }

  .site-header { padding: 12px 12px 0; }

  .main-nav a {
    flex: 1 1 50%;
    text-align: center;
    border-bottom: 1px solid #aaa092;
  }

  main { padding: 16px; }

  .featured,
  .two-column,
  .about {
    grid-template-columns: 1fr;
  }

  .featured-photo img { min-height: 0; }
  .featured-copy, .story-copy, .about-copy { padding: 24px; }
  h1 { font-size: 34px; }

  .recipe-grid { grid-template-columns: 1fr; }

  .about-photo { order: -1; }

  .section-heading {
    display: block;
    padding-bottom: 8px;
  }
}


/* Individual recipe pages */
.recipe-page {
  max-width: 860px;
  margin: 0 auto;
}

.recipe-header {
  text-align: center;
  padding: 18px 40px 8px;
}

.recipe-header h1 {
  margin-bottom: 12px;
  font-size: 46px;
}

.recipe-intro {
  max-width: 680px;
  margin: 0 auto 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  color: #4c4944;
}

.recipe-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 18px 0;
}

.print-button {
  padding: 10px 16px;
  border: 1px solid #8e8476;
  border-radius: 2px;
  background: linear-gradient(#f9f5ed, #e7dfd2);
  color: var(--blue-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
}

.recipe-hero {
  margin: 18px 0 32px;
  padding: 7px;
  border: 1px solid var(--line);
  background: #fff;
}

.recipe-hero img { width: 100%; }

.recipe-story {
  max-width: 680px;
  margin: 0 auto 42px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.75;
}

.full-recipe {
  scroll-margin-top: 15px;
  margin: 40px 0;
  border: 2px solid var(--blue);
  background: #fff;
}

.recipe-card-heading {
  padding: 22px 28px 16px;
  text-align: center;
  background: var(--soft-blue);
  border-bottom: 1px solid #9daeb8;
}

.recipe-card-heading h2 { margin-bottom: 5px; }

.recipe-columns {
  display: grid;
  grid-template-columns: 38% 62%;
}

.recipe-columns > div { padding: 26px 30px; }

.recipe-columns > div:first-child {
  background: #faf6ee;
  border-right: 1px solid var(--line);
}

.recipe-columns ul,
.recipe-columns ol {
  padding-left: 22px;
  margin-bottom: 0;
}

.recipe-columns li { margin-bottom: 11px; }

.randys-note {
  margin: 0 28px 24px;
  padding: 18px 22px;
  background: #f3ede2;
  border: 1px solid var(--line);
  border-left: 5px solid var(--brown);
}

.randys-note h3 { font-size: 20px; }
.randys-note p { margin: 5px 0; }

.bottom-print {
  display: block;
  margin: 0 auto 28px;
}

.comments-preview {
  margin: 42px 0 12px;
  padding-top: 24px;
  border-top: 3px double var(--line);
}

@media (max-width: 760px) {
  .recipe-header { padding: 12px 8px 6px; }
  .recipe-header h1 { font-size: 35px; }
  .recipe-story { font-size: 17px; }
  .recipe-columns { grid-template-columns: 1fr; }
  .recipe-columns > div:first-child {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media print {
  body { background: white; }
  .page-shell { width: 100%; margin: 0; border: 0; box-shadow: none; }
  .site-header, .recipe-header, .recipe-hero, .recipe-story, footer,
  .comments-preview, .print-button { display: none !important; }
  main { padding: 0; }
  .recipe-page { max-width: none; }
  .full-recipe { margin: 0; border: 1px solid #333; }
  .recipe-columns { display: grid; grid-template-columns: 38% 62%; }
  .recipe-columns > div { padding: 18px; }
}


/* Story and cooking photographs */
.story-photo {
  max-width: 720px;
  margin: 34px auto 40px;
  padding: 7px;
  border: 1px solid var(--line);
  background: #fff;
}

.story-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.story-photo figcaption {
  padding: 9px 8px 3px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.45;
  color: #666057;
  text-align: center;
}

.old-photo {
  max-width: 650px;
}

.cooking-photo {
  margin-top: 8px;
  margin-bottom: 38px;
}

@media print {
  .story-photo { display: none !important; }
}


/* Regional recipe explainer */
.recipe-definition {
  margin: 0;
  padding: 18px 28px;
  background: #faf6ee;
  border-bottom: 1px solid var(--line);
}
.recipe-definition h3 {
  margin-bottom: 6px;
  font-size: 20px;
}
.recipe-definition p {
  margin: 0;
}
.recipe-alias {
  margin: 8px auto 0;
  max-width: 650px;
  font-size: 14px;
  line-height: 1.5;
}


/* Reader comments */
.comments-section {
  margin: 46px 0 14px;
  padding-top: 28px;
  border-top: 3px double var(--line);
}
.comments-section h2 { margin-bottom: 18px; }
.no-comments { font-style: italic; color: #666057; }
.reader-comment {
  margin: 0 0 16px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: #fff;
}
.reader-comment p { margin: 8px 0 0; }
.comment-meta { font-family: Georgia, "Times New Roman", serif; }
.comment-meta span { color: #777067; font-size: 13px; }
.comment-form-wrap {
  margin-top: 28px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  background: #faf6ee;
}
.comment-form-wrap h3 { margin-bottom: 5px; }
.comment-form { margin-top: 18px; }
.comment-form label, .admin-login label {
  display: block;
  margin-bottom: 14px;
  font-weight: bold;
}
.comment-form input, .comment-form textarea, .admin-login input {
  box-sizing: border-box;
  width: 100%;
  margin-top: 5px;
  padding: 9px 10px;
  border: 1px solid #9b9489;
  background: white;
  font: inherit;
}
.comment-form textarea { resize: vertical; }
.optional { font-weight: normal; color: #716b63; font-size: 12px; }
.honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.comment-message { padding: 12px 14px; border: 1px solid; }
.comment-message.success { background: #eef4ea; border-color: #8ba07f; }
.comment-message.error { background: #f8eaea; border-color: #ad7d7d; }

/* Private comment administration */
.admin-shell {
  width: min(900px, calc(100% - 32px));
  margin: 40px auto;
  padding: 28px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  background: #fffdf8;
}
.admin-top { display: flex; justify-content: space-between; gap: 20px; align-items: start; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.admin-login { max-width: 500px; }
.admin-comment { margin: 16px 0; padding: 18px; border: 1px solid var(--line); background: #faf6ee; }
.admin-comment.approved { background: #f7f7f4; }
.admin-email { color: #716b63; font-size: 13px; }
.admin-comment-body { padding: 12px 0; white-space: normal; }
.admin-actions { display: flex; gap: 8px; }
.delete-button {
  padding: 10px 16px;
  border: 1px solid #8c6666;
  background: #f4eaea;
  font-weight: bold;
  cursor: pointer;
}
.approved-heading { margin-top: 38px; }
.setup-output { white-space: pre-wrap; padding: 15px; border: 1px solid var(--line); background: #f5f2eb; overflow-wrap: anywhere; }

@media print {
  .comments-section { display: none !important; }
}

/* v7 custom CMS */
.admin-wide{width:min(1180px,calc(100% - 30px))}.admin-nav{display:flex;flex-wrap:wrap;gap:8px 18px;padding:12px 0 20px;margin-bottom:24px;border-bottom:1px solid var(--line)}.admin-big-actions{display:flex;gap:12px;flex-wrap:wrap}.cms-form{max-width:1000px}.cms-form label{display:block;font-weight:bold;margin:14px 0}.cms-form input,.cms-form textarea,.cms-form select{box-sizing:border-box;width:100%;margin-top:5px;padding:9px;border:1px solid #9b9489;background:#fff;font:inherit}.cms-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.cms-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.compact{max-width:650px}.admin-table{width:100%;border-collapse:collapse}.admin-table th,.admin-table td{text-align:left;border-bottom:1px solid var(--line);padding:10px}.source-tag{font-size:11px;text-transform:uppercase;border:1px solid var(--line);padding:2px 5px}.asset-grid,.recipe-index-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.asset-card{border:1px solid var(--line);padding:14px;background:#fff}.asset-card img{width:100%;height:220px;object-fit:cover}.rating-box,.nutrition-widget{margin:28px 0;padding:18px 20px;border:1px solid var(--line);background:#faf6ee}.star-form{display:flex;gap:7px;flex-wrap:wrap}.star-form button{padding:7px 10px;background:#fff;border:1px solid #8e867b;cursor:pointer}.randy-reply{margin:16px 0 0 28px;padding:12px 15px;border-left:4px solid #6f7d87;background:#f6f3ec}.randy-reply span{color:#777067;font-size:13px}.nutrition-widget .serving-input{width:75px;padding:5px}.nutrition-disclaimer{font-size:12px;color:#6f6961}.draft-banner{padding:10px;border:2px dashed #8b6b44;text-align:center;font-weight:bold}.recipe-hero img{width:100%;height:auto}.recipe-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.print-button{font:inherit;cursor:pointer}.recipe-box{margin-top:28px}.recipe-index-grid .recipe-card img{width:100%;height:230px;object-fit:cover}
@media(max-width:760px){.cms-grid,.cms-grid-3,.asset-grid,.recipe-index-grid{grid-template-columns:1fr}}@media print{.rating-box,.comments-section,.recipe-actions,.site-header,footer{display:none!important}}