/* The home page, built from the approved mockup (option B): the tasbeha.org palette, scoped under .home so it cannot touch other pages. */
.home {
  /* tasbeha.org palette */
  --white: #ffffff; --cream: #fffaea; --sand: #ece3cf; --ink: #1f1a17; --ink-soft: #6e6258;
  --gold-light: #f9edc0; --gold-pale: #fbf0c4; --brown: #562300; --umber: #673417; --sienna: #7a3f1b; --ochre: #8a5a2b;
  --bronze: #c89c65; --gold: #c28a00; --lapis: #3a669f; --cinnabar: #b03e23; --logo-brown: #905416;
  /* copticchurch.net's own header */
  --cc-header: #f2db87; --cc-brand: #5e3a15; --cc-nav: #825221;
  --font-display: "Marcellus", "Marcellus Fallback", "Trajan Pro", Georgia, serif;
  --font-serif: "Crimson Pro", "Crimson Pro Fallback", Georgia, "Times New Roman", serif;
  --font-sans: "Figtree", "Figtree Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-coptic: "CSU Avva Shenouda", "Noto Sans Coptic", "Segoe UI Historic", sans-serif;
  --font-ar: "Arabic Text", "Crimson Pro", "Crimson Pro Fallback", Georgia, "Noto Naskh Arabic", "Geeza Pro", "Traditional Arabic", serif;
  --font-ar-heading: "Arabic Heading", "Arabic Text", "Noto Naskh Arabic", "Geeza Pro", serif;
  --container: 1170px; --gutter: 32px;
  color: var(--ink); font-family: var(--font-serif);
}
/* ---------- Common pieces ---------- */
.home .section { padding: 48px 0 0; }
.home .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.home .section-head h2 { font-size: 28px; line-height: 1.15; letter-spacing: .01em; }
.home .section-head .more { font: 500 15px/1.3 var(--font-sans); white-space: nowrap; }
.home .section-head .ar-heading { font-size: 22px; color: var(--cc-brand); }
.home .lead { font-size: 21px; line-height: 1.5; }
.home .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 2px; border: 1px solid var(--umber);
  background: var(--umber); color: var(--white); font: 600 15px/1.35 var(--font-sans); text-decoration: none; cursor: pointer; }
.home .btn:hover { background: var(--brown); border-color: var(--brown); color: var(--white); }
.home .btn-ghost { background: transparent; color: var(--umber); border-color: var(--bronze); }
.home .btn-ghost:hover { background: var(--cream); color: var(--brown); }
.home .btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.home .card { background: var(--white); border: 1px solid var(--sand); border-radius: 2px; padding: 20px; }
.home .card h3 { font-size: 20px; line-height: 1.3; color: var(--logo-brown); margin-bottom: 8px; }
.home .card p { font-size: 16px; line-height: 1.5; }
.home .card p:last-child { margin-bottom: 0; }
.home .card .links { font: 500 15px/1.4 var(--font-sans); margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.home .card--cream { background: var(--cream); }
.home .input, .home .select { font: 400 15px/1.3 var(--font-sans); color: var(--ink); height: 40px; padding: 0 12px; border: 1px solid var(--ink-soft); border-radius: 2px; background: var(--white); box-shadow: inset 0 1px 2px rgba(35,27,24,.08); }
.home .select { padding-right: 28px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: calc(100% - 15px) 17px, calc(100% - 10px) 17px; background-size: 5px 5px; background-repeat: no-repeat; }
.home .form-row { display: flex; flex-wrap: wrap; gap: 8px; }
.home .grid { display: grid; gap: 24px; }
.home .g-2 { grid-template-columns: repeat(2, 1fr); }
.home .g-3 { grid-template-columns: repeat(3, 1fr); }
.home .g-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) { .home .g-4 { grid-template-columns: repeat(2, 1fr); } .home .g-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .home .g-2, .home .g-3, .home .g-4 { grid-template-columns: 1fr; } .home .grid { gap: 16px; } .home .section { padding-top: 36px; } .home .section-head h2 { font-size: 24px; } }
.home .ref { font: 600 15px/1.4 var(--font-sans); color: var(--brown); }
.home .rule-gold { border: 0; border-top: 2px solid var(--gold); width: 56px; margin: 0 0 16px; }
.home .niche { border-radius: 999px 999px 0 0; overflow: hidden; border: 1px solid var(--bronze); box-shadow: 0 0 0 4px var(--cream), 0 0 0 5px var(--bronze); background: var(--cream); }
.home .niche img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.home .fig { font: 400 13px/1.4 var(--font-sans); color: var(--ink-soft); margin-top: 14px; text-align: center; }


.home .kicker { font: 600 12.5px/1.3 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ochre); }
.home .meta { font-size: 14px; line-height: 1.4; color: var(--ink-soft); font-family: var(--font-sans); }
.home .ar { font-family: var(--font-ar); direction: rtl; text-align: right; font-size: 19px; line-height: 2.25; }
.home .ar-heading { font-family: var(--font-ar-heading); font-weight: 500; line-height: 1.7; }

  /* Hero: the welcome for someone who does not know the Church, with St. Mark in an arched niche */
  .home .hero { padding: 44px 0 0; }
  .home .hero-in { display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: center; }
  .home .hero h1 { font-size: 44px; line-height: 1.08; letter-spacing: .01em; margin: 10px 0 18px; }
  .home .hero .lead { max-width: 62ch; margin-bottom: 22px; }
  .home .hero .also { font: 400 15px/1.6 var(--font-sans); color: var(--ink-soft); margin-top: 18px; }
  .home .hero .also a { color: var(--sienna); }
  .home .hero-art { justify-self: end; width: 260px; }
  .home .hero-art .niche { height: 380px; }
  @media (max-width: 991px) { .home .hero-in { grid-template-columns: 1fr 220px; gap: 32px; } .home .hero-art { width: 200px; } .home .hero-art .niche { height: 300px; } .home .hero h1 { font-size: 36px; } }
  @media (max-width: 599px) { .home .hero { padding-top: 28px; } .home .hero-in { grid-template-columns: 1fr; } .home .hero h1 { font-size: 31px; } .home .hero-art { justify-self: center; width: 180px; } .home .hero-art .niche { height: 270px; } .home .hero .btn-row .btn { flex: 1 1 100%; } }

  /* Today: one cream band, three columns, worked out in the browser as the readings cards are now */
  .home .today { margin-top: 44px; background: var(--cream); border-top: 1px solid var(--sand); border-bottom: 1px solid var(--sand); padding: 28px 0 30px; }
  .home .today-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 18px; }
  .home .today-head h2 { font-size: 24px; }
  .home .today-head .date { font: 500 15px/1.4 var(--font-sans); color: var(--ink-soft); }
  .home .today-head .date b { color: var(--brown); font-weight: 600; }
  .home .today-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 24px; }
  .home .tcard { background: var(--white); border: 1px solid var(--sand); border-radius: 2px; padding: 18px 20px 16px; display: flex; flex-direction: column; }
  .home .tcard h3 { font-size: 19px; color: var(--logo-brown); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .home .tcard h3 .ar-heading { font-size: 17px; color: var(--ochre); }
  .home .svc { margin: 10px 0 0; padding: 0; list-style: none; font-size: 16px; line-height: 1.5; }
  .home .svc li { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 5px 0; border-top: 1px solid var(--sand); }
  .home .svc li:first-child { border-top: 0; }
  .home .svc .kicker { padding-top: 3px; }
  .home .svc a { color: var(--ink); text-decoration: none; }
  .home .svc a:hover { color: var(--brown); text-decoration: underline; }
  .home .tcard .foot { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font: 500 15px/1.4 var(--font-sans); }
  .home .tcard .foot .ar { font-size: 17px; line-height: 1.6; }
  .home .syn-title { font-size: 19px; line-height: 1.35; margin: 10px 0 6px; }
  .home .syn-title a { color: var(--ink); text-decoration: none; }
  .home .syn-title a:hover { color: var(--brown); }
  .home .tcard .ar.story { font-size: 18px; line-height: 1.95; margin: 6px 0 0; color: var(--ink); }
  .home .excerpt { font-size: 16px; line-height: 1.5; color: var(--ink-soft); margin: 0; }
  .home .upcoming { margin: 10px 0 0; padding: 0; list-style: none; font-size: 16px; }
  .home .upcoming li { padding: 7px 0; border-top: 1px solid var(--sand); display: grid; grid-template-columns: 1fr auto; gap: 10px; }
  .home .upcoming li:first-child { border-top: 0; }
  .home .upcoming .when { font: 500 14px/1.5 var(--font-sans); color: var(--ink-soft); white-space: nowrap; }
  .home .cdate { font-family: var(--font-display); font-size: 26px; color: var(--brown); line-height: 1.2; margin-top: 8px; }
  .home .cdate small { display: block; margin-top: 2px; }
  @media (max-width: 991px) { .home .today-grid { grid-template-columns: 1fr 1fr; } .home .tcard.readings { grid-column: 1 / -1; } }
  @media (max-width: 599px) { .home .today-grid { grid-template-columns: 1fr; gap: 16px; } .home .today { padding: 22px 0 24px; } }

  /* Explore the Church: eight doors */
  .home .doors .card { display: flex; flex-direction: column; }
  .home .doors .card .links { margin-top: auto; padding-top: 10px; }
  .home .doors .card h3 { padding-top: 8px; border-top: 2px solid var(--gold); }

  /* The Bible: lookup and the three scripts side by side */
  .home .bible { background: var(--cream); border: 1px solid var(--sand); border-radius: 2px; padding: 24px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px; }
  .home .bible p { font-size: 17px; }
  .home .bible .form-row .input { flex: 1 1 180px; min-width: 0; }
  .home .versions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .home .versions a { font: 500 14px/1.3 var(--font-sans); padding: 7px 12px; border: 1px solid var(--bronze); border-radius: 999px; color: var(--umber); text-decoration: none; background: var(--white); }
  .home .versions a:hover { background: var(--gold-pale); color: var(--brown); }
  .home .verse-sample { background: var(--white); border: 1px solid var(--sand); border-radius: 2px; }
  .home .verse-sample .vs-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--sand); }
  .home .verse-sample .vs-head h3 { font-size: 20px; color: var(--logo-brown); }
  .home .vs-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  .home .vs-cols > div { padding: 14px 18px 16px; border-left: 1px solid var(--sand); }
  .home .vs-cols > div:first-child { border-left: 0; }
  .home .vs-cols .kicker { display: block; margin-bottom: 8px; }
  .home .vs-cols .en { font-size: 17px; line-height: 1.5; }
  .home .vs-cols .ar { font-size: 19px; line-height: 1.9; }
  .home .vs-cols .coptic { font-size: 21px; line-height: 1.55; }
  .home .vs-foot { padding: 10px 18px; border-top: 1px solid var(--sand); font: 400 13.5px/1.4 var(--font-sans); color: var(--ink-soft); }
  @media (max-width: 991px) { .home .bible { grid-template-columns: 1fr; } }
  @media (max-width: 599px) { .home .bible { padding: 18px 16px; } .home .vs-cols { grid-template-columns: 1fr; } .home .vs-cols > div { border-left: 0; border-top: 1px solid var(--sand); } .home .vs-cols > div:first-child { border-top: 0; } }

  /* Books: typographic spines, since the site has page scans but no covers */
  .home .books { grid-template-columns: repeat(6, 1fr); }
  .home .book { display: flex; flex-direction: column; min-height: 190px; padding: 14px 14px 12px; background: var(--cream); border: 1px solid var(--sand); border-left: 6px solid var(--bronze); border-radius: 2px; text-decoration: none; color: var(--ink); }
  .home .book:hover { border-left-color: var(--gold); background: var(--gold-pale); color: var(--ink); }
  .home .book .kicker { margin-bottom: 8px; }
  .home .book b { font: 400 18px/1.25 var(--font-display); color: var(--cc-brand); }
  .home .book .ar { font-size: 17px; line-height: 1.7; margin-top: 2px; }
  .home .book small { margin-top: auto; padding-top: 10px; }
  @media (max-width: 991px) { .home .books { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 599px) { .home .books { grid-template-columns: 1fr 1fr; gap: 12px; } .home .book { min-height: 150px; } }

  /* Find a church + the Coptic language */
  .home .find { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .home .find .photo { border: 1px solid var(--sand); border-radius: 2px; overflow: hidden; min-height: 240px; }
  .home .find .photo img { width: 100%; height: 100%; object-fit: cover; }
  .home .find form { display: grid; gap: 12px; max-width: 380px; }
  .home .find label { font: 600 15px/1.3 var(--font-sans); color: var(--ink); display: block; margin-bottom: 4px; }
  .home .lang { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .home .greet { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin: 6px 0 0; }
  .home .greet .coptic { font-size: 30px; color: var(--brown); }
  .home .greet .ar { font-size: 20px; }
  @media (max-width: 767px) { .home .find, .home .lang { grid-template-columns: 1fr; } .home .find .photo { order: -1; min-height: 180px; max-height: 220px; } }

/* what the mockup took from the page reset */
.home, .home * { box-sizing: border-box; }
.home { font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.home img { max-width: 100%; height: auto; display: block; }
.home a { color: var(--sienna); text-underline-offset: 2px; }
.home a:hover { color: var(--brown); }
.home h1, .home h2, .home h3, .home h4 { font-family: var(--font-display); font-weight: 400; color: var(--cc-brand); margin: 0; padding: 0; }
.home .ar h1, .home .ar h2, .home .ar h3, .home .ar h4 { font-family: var(--font-ar-heading); }
.home p { margin: 0 0 1em; }
.home ul { padding: 0; }
.home button, .home input, .home select, .home label { font-family: var(--font-sans); }
.home :focus-visible { outline: 2px solid var(--lapis); outline-offset: 2px; }
.home .coptic { font-family: var(--font-coptic); font-size: 1.2em; line-height: 1.6; }
/* the Base layout puts the page in a narrow column; the home page uses the full width */
.home .tcard .foot a { text-decoration: underline; }
.home .hp-container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
@media (max-width: 767px) { .home { --gutter: 16px; } }