/* Berea design system - see docs/design-system.md */
:root {
  --leather: #17130e;
  --leather-2: #241c13;
  --page: #fbf7ee;
  --page-edge: #efe6d2;
  --ink: #17140f;
  --ink-soft: #4a4034;
  --gild: #b0893f;
  --gild-soft: #d8c48a;
  --ribbon: #7a2f2a;
  --rule: #e2d7bf;
  --font-display: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --font-body: "EB Garamond", "Iowan Old Style", Charter, Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  font-size: 1.075rem;
  line-height: 1.7;
  /* leather exterior with a soft lamplit vignette */
  background:
    radial-gradient(120% 85% at 50% -5%, #2c2318 0%, var(--leather) 55%, #0d0a06 100%)
    fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* The page: a cream sheet on the leather */
.room { display: flex; justify-content: center; padding: clamp(1rem, 4vw, 3rem) 1rem 4rem; }
.page {
  position: relative;
  width: 100%;
  max-width: 46rem;
  background: var(--page);
  border-radius: 3px;
  border-top: 2px solid var(--gild);
  box-shadow:
    0 1px 0 var(--page-edge) inset,
    0 2px 5px rgba(0,0,0,.3),
    0 26px 64px rgba(0,0,0,.5);
  padding: clamp(1.8rem, 4vw, 3rem) clamp(1.3rem, 5vw, 3.4rem) 2.4rem;
  /* faint spine shadow down the left inner margin */
  background-image: linear-gradient(90deg, rgba(120,90,40,.07) 0, rgba(120,90,40,0) 4%);
}

/* Ribbon bookmark down from the top edge */
.ribbon {
  position: absolute; top: -2px; right: 2.4rem; width: 1.15rem; height: 4.6rem;
  background: linear-gradient(180deg, #8c3a33, var(--ribbon));
  box-shadow: 0 2px 3px rgba(0,0,0,.3);
}
.ribbon::after {
  content: ""; position: absolute; bottom: -.55rem; left: 0; width: 0; height: 0;
  border-left: .575rem solid var(--ribbon); border-right: .575rem solid var(--ribbon);
  border-bottom: .6rem solid transparent;
}

/* Masthead */
.masthead { text-align: center; margin-bottom: 1.7rem; }
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: .01em;
  line-height: 1;
  display: inline-block;
}
.epigraph {
  font-style: italic; color: var(--ink-soft); margin: .45rem 0 0;
  font-size: 1.05rem;
}
/* gilt double rule under the masthead, like a title page */
.rule2 { margin-top: 1rem; border-top: 1px solid var(--gild); position: relative; height: 4px; }
.rule2::after {
  content: ""; position: absolute; left: 0; right: 0; top: 3px;
  border-top: 1px solid rgba(176,137,63,.45);
}
nav { margin-top: .7rem; text-align: center; }
nav a {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--ink-soft); text-decoration: none; margin: 0 .9rem;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
}
nav a:hover, nav a[aria-current] { color: var(--gild); border-bottom-color: var(--gild); }

/* Ask area: search bar + a locked-height scroll viewer holding the thread.
   Answers fill the viewer top-down; the viewer does NOT auto-scroll to follow
   the printing text, so the reader reads from the top and scrolls at will. */
.ask { display: flex; flex-direction: column; }
.ask.hero { min-height: 30vh; justify-content: center; }
.ask.hero .viewer { display: none; }

.viewer {
  position: relative;
  height: min(58vh, 40rem);
  overflow-y: auto;
  margin-bottom: 1.1rem;
  padding-right: .4rem;
  /* faint gilt edges to signal the page continues */
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  scroll-behavior: smooth;
}
.thread { padding: .9rem 0; }
.entry { margin-bottom: 1.8rem; }
.entry .q {
  font-family: var(--font-display); font-weight: 600; font-style: italic;
  font-size: 1.4rem; color: var(--ink); margin: 0 0 .45rem;
}
.entry .q::before { content: "\201C"; color: var(--gild); }
.entry .q::after { content: "\201D"; color: var(--gild); }
.entry .divider { height: 1px; background: var(--rule); margin: .3rem 0 .9rem; }
.entry .a { }
.entry .a .caret {
  display: inline-block; width: .5ch; background: var(--gild);
  animation: blink 1s steps(1) infinite; color: transparent;
}
@keyframes blink { 50% { opacity: 0; } }

/* Search bar (Google-style pill) */
/* Search box on its own row; the Ask + Plain language pills sit beneath it. */
.searchbar { display: flex; flex-direction: column; gap: .7rem; }
.searchrow {
  display: flex; align-items: center; gap: .5rem;
  background: #fff; border: 1px solid var(--rule); border-radius: 999px;
  padding: .5rem .5rem .5rem 1.1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.05) inset;
  transition: border-color .2s, box-shadow .2s;
}
.searchrow:focus-within {
  border-color: var(--gild);
  box-shadow: 0 0 0 3px rgba(176,137,63,.15);
}
.quill { color: var(--gild); font-size: 1.1rem; line-height: 1; }
.searchrow input[type=text] {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: var(--font-body); font-size: 1.1rem; color: var(--ink);
  padding: .5rem 0;
}
.searchactions { display: flex; align-items: center; gap: .6rem; justify-content: flex-end; }
/* Plain-language pill: a session toggle sitting next to Ask */
.plain-toggle {
  border: 1px solid var(--rule); border-radius: 999px; cursor: pointer;
  background: #fff; color: var(--ink-soft); white-space: nowrap;
  font-family: var(--font-body); font-size: .84rem; letter-spacing: .01em;
  padding: .48rem .9rem; transition: background .2s, color .2s, border-color .2s;
}
.plain-toggle::before {
  content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--rule); margin-right: .45rem; vertical-align: middle;
  transition: background .2s;
}
.plain-toggle:hover { border-color: var(--gild); color: var(--ink); }
.plain-toggle:focus-visible { outline: 2px solid var(--gild); outline-offset: 2px; }
.plain-toggle.on { background: var(--leather-2); color: var(--gild-soft); border-color: var(--leather-2); }
.plain-toggle.on::before { background: var(--gild-soft); }
#go {
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--leather-2); color: var(--gild-soft);
  font-family: var(--font-body); font-size: .95rem; letter-spacing: .03em;
  padding: .55rem 1.6rem;
}
#go:hover { background: var(--ink); color: #fff; }
#go:disabled { opacity: .55; cursor: default; }
.status { min-height: 1.3em; color: var(--ribbon); font-style: italic; font-size: .95rem; margin-top: .6rem; }

/* Answer prose */
.a h1, .a h2, .a h3 { font-family: var(--font-display); font-weight: 600; color: var(--ink); line-height: 1.2; }
.a h1 { font-size: 1.5rem; margin: 1.2rem 0 .5rem; }
.a h2 { font-size: 1.22rem; margin: 1.3rem 0 .4rem; }
.a h3 { font-size: 1.08rem; margin: 1.1rem 0 .3rem; }
.a p { margin: .55rem 0; }
.a ul { margin: .5rem 0; padding-left: 1.2rem; }
.a li { margin: .3rem 0; }
.a strong { font-weight: 600; }
/* study-Bible verse references in small caps gild */
.ref { font-variant: small-caps; letter-spacing: .03em; color: var(--gild); font-style: normal; }

/* Home sections (hidden once a conversation starts) */
.home { margin-top: 2.4rem; }
.home.gone { display: none; }
.eyebrow {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--gild); margin: 0 0 .3rem;
}

/* Info cards: uniform clickable tiles showing icon + title only; the full
   description opens in the shared modal on click. */
.fourcol { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-bottom: 2.4rem; }
.icard {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  width: 100%; min-height: 6.5rem; text-align: left; cursor: pointer; font: inherit;
  background: var(--leather-2); color: var(--page);
  border: 1px solid rgba(216,196,138,.25); border-radius: 6px;
  padding: 1.1rem 1rem 2rem;
  transition: border-color .2s, box-shadow .2s, transform .08s;
}
.icard:hover { border-color: var(--gild-soft); box-shadow: 0 4px 16px rgba(0,0,0,.32); }
.icard:active { transform: translateY(1px); }
.icard:focus-visible { outline: 2px solid var(--gild-soft); outline-offset: 2px; }
.icard::after {
  content: "\203A"; position: absolute; right: .85rem; bottom: .55rem;
  color: var(--gild-soft); font-size: 1.15rem; line-height: 1; opacity: .7;
}
.icard .glyph { color: var(--gild-soft); line-height: 1; display: block; margin-bottom: .6rem; }
.icard .glyph svg { width: 26px; height: 26px; display: block; }
.icard .label {
  font-family: var(--font-display); font-weight: 600; font-size: 1.08rem;
  letter-spacing: .01em; color: var(--page); line-height: 1.2;
}
.icard-desc { display: none; }

/* Question cards (homepage top-3 + Top Questions page).
   A dropdown list: one question per line; click expands the answer inline below. */
.qcards { display: flex; flex-direction: column; gap: .6rem; }
.qcard {
  background: #fff; border: 1px solid var(--rule); border-radius: 6px; padding: 0;
  transition: border-color .2s;
}
.qcard:hover { border-color: var(--gild); }
.qcard summary {
  cursor: pointer; list-style: none; font-family: var(--font-display);
  font-weight: 600; font-size: 1.14rem; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .85rem 1.15rem;
}
.qcard summary::-webkit-details-marker { display: none; }
.qcard summary:focus-visible { outline: 2px solid var(--gild); outline-offset: -2px; border-radius: 6px; }
.qcard summary .mark { color: var(--gild); font-size: 1.4rem; line-height: 1; flex: none; transition: transform .2s; }
.qcard[open] summary .mark { transform: rotate(45deg); }
.qcard[open] summary { border-bottom: 1px solid var(--rule); }
.qcard .body { padding: .8rem 1.15rem 1.1rem; }

/* Answer modal (used by the info cards) */
.qmodal {
  flex-direction: column; padding: 0; max-width: 42rem; width: calc(100% - 2rem);
  max-height: 84vh; color: var(--ink); background: var(--page);
  border: 1px solid var(--gild); border-top: 3px solid var(--gild); border-radius: 4px;
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
}
.qmodal[open] { display: flex; }
.qmodal::backdrop { background: rgba(10,7,4,.62); }
.qmodal-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding: 1.4rem 1.7rem .9rem; border-bottom: 1px solid var(--rule);
}
.qmodal-q {
  margin: 0; font-family: var(--font-display); font-weight: 600; font-style: italic;
  font-size: 1.5rem; line-height: 1.2; color: var(--ink);
}
.qmodal-x {
  border: 0; background: transparent; color: var(--ink-soft); flex: none;
  font-size: 1.7rem; line-height: 1; cursor: pointer; padding: 0 .15rem;
}
.qmodal-x:hover { color: var(--gild); }
.qmodal-a { overflow-y: auto; padding: 1rem 1.7rem 1.9rem; }

.honesty {
  margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid var(--rule);
  font-size: .93rem; color: var(--ink-soft);
}
.honesty strong { color: var(--ink); }

footer {
  margin-top: 2rem; text-align: center; font-size: .78rem; color: var(--ink-soft);
}
footer a { color: var(--gild); text-decoration: none; }

@media (max-width: 640px) {
  .fourcol { grid-template-columns: 1fr 1fr; }
  .ribbon { right: 1.4rem; }
  /* On phones, once an answer is being populated, let the reading area fill the
     screen so the answer gets the whole viewport. */
  .ask:not(.hero) .viewer { height: calc(100dvh - 10.5rem); }
}
@media (prefers-reduced-motion: reduce) {
  .entry .a .caret { animation: none; }
  * { scroll-behavior: auto !important; }
}