/* Father Blackwood — the light layer over Bootstrap 5.3.
 *
 * The rule of this file: Bootstrap owns layout, spacing and components. This
 * sheet owns only what a framework can't know — the palette, the type, and the
 * three or four textures that make it this site and not any other.
 *
 * Everything below is either (a) a Bootstrap CSS variable override, so its own
 * components come out in our colours, or (b) a .fb-* class for a texture.
 * If a rule here could have been a Bootstrap utility in the markup, it's a bug.
 */

/* ---- 1. the palette, handed to Bootstrap as its own variables -------------- */
:root,
[data-bs-theme="dark"] {
  --fb-accent:      #C9A24B;              /* gilt — the one accent */
  --fb-accent-warm: #E4C275;
  --fb-ground:      #070b08;              /* "Sacristy": near-black green */
  --fb-card:        rgba(233,236,223,.028);
  --fb-card-hover:  rgba(201,162,75,.06);

  --serif: "Times New Roman", Times, "Liberation Serif", Tinos, "Nimbus Roman", serif;

  /* Bootstrap reads these for body, borders, links, muted text and focus rings,
     so .btn, .form-control, .border-top, .text-body-secondary etc. all inherit. */
  --bs-body-bg: var(--fb-ground);
  --bs-body-color: #E7EBDD;
  --bs-body-font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, Tahoma, sans-serif;
  --bs-body-font-size: 1.125rem;
  --bs-body-line-height: 1.6;
  --bs-secondary-color: #8FA187;
  --bs-border-color: rgba(154,184,150,.15);
  --bs-emphasis-color: #E7EBDD;
  --bs-link-color: var(--fb-accent);
  --bs-link-hover-color: var(--fb-accent-warm);
  --bs-focus-ring-color: rgba(201,162,75,.5);
  --bs-focus-ring-width: 1px;
  --bs-border-radius: 6px;

  /* gilt takes over Bootstrap's "warning" slot, so the .text-warning and
     .link-warning UTILITIES come out in the one accent instead of amber.
     .btn-warning does not follow: Bootstrap bakes #ffc107 into the button
     variants rather than reading --bs-warning. See .fb-btn (§19). */
  --bs-warning: var(--fb-accent);
  --bs-warning-rgb: 201, 162, 75;
}
::selection { background: rgba(201,162,75,.24); }

/* ---- 2. the stage: gradient + a whisper of grain to kill banding ----------- */
.fb-stage {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 5% -10%, #142018 0%, rgba(20,32,24,0) 52%),
    radial-gradient(85% 65% at 80% 6%, #0d1610 0%, rgba(13,22,16,0) 44%),
    radial-gradient(130% 125% at 110% 118%, #020403 0%, rgba(2,4,3,0) 58%),
    linear-gradient(158deg, #0b110b 0%, #080d08 55%, #050805 100%);
}
.fb-stage::before {
  content: ""; position: fixed; inset: 0; z-index: 0;
  pointer-events: none; opacity: .5; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.fb-stage > * { position: relative; z-index: 1; }

/* ---- 3. the type: Times for anything that names a thing ------------------- */
.fb-serif { font-family: var(--serif); font-weight: 340; letter-spacing: 0; }
.fb-thesis  { font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1.03;
              max-width: 15ch; text-wrap: balance; }
.fb-thesis em { font-style: italic; color: var(--fb-accent); }
.fb-title   { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.12; }
.fb-dek     { max-width: 52ch; }
/* No max-width on the feed: capping it inside a half-width column left-aligns
   the cards and dumps every spare pixel on the right edge (248px at 1920). The
   cards fill their column; the dek's own 52ch cap keeps the prose readable, so
   the slack ends up inside the card rather than as dead page margin. */

/* ---- 4. the sidebar: frozen while the cards scroll past it ---------------- */
/* Bootstrap breaks on width alone, and freezing a full-height panel is only safe
 * when the viewport is tall enough to hold it. On a short window (a laptop at
 * 1280x720 leaves ~633px) the hero, the coastline and the icon nav don't fit in
 * 100dvh, and the icons get clipped with no way to reach them. So the freeze is
 * gated on height as well as width; below that, the panel simply scrolls away.
 * This is why .sticky-lg-top is NOT in the markup — it can't express this. */
@media (min-width: 992px) and (min-height: 700px) {
  .fb-sidebar { position: sticky; top: 0; height: 100dvh; }
}

/* ---- 5. the feed: Bootstrap's list-group, turned down to a whisper --------
 * The component brings the hover, focus and :active states, the keyboard
 * behaviour and the padding scale; everything below is a knob, not a rule.
 * The design wants separated cards rather than a contiguous list, so borders
 * go to zero and .gap-2 in the markup does the separating. */
.fb-feed {
  --bs-list-group-bg: var(--fb-card);
  --bs-list-group-color: var(--bs-body-color);
  --bs-list-group-border-width: 0;
  --bs-list-group-item-padding-x: clamp(1.3rem, 2.4vw, 1.8rem);
  --bs-list-group-item-padding-y: clamp(1.3rem, 2.4vw, 1.9rem);
  --bs-list-group-action-color: var(--bs-body-color);
  --bs-list-group-action-hover-color: var(--bs-body-color);
  --bs-list-group-action-hover-bg: var(--fb-card-hover);
  --bs-list-group-action-active-color: var(--bs-body-color);
  --bs-list-group-action-active-bg: var(--fb-card-hover);
}
/* Bootstrap rounds only the first and last item, since a list-group is normally
   contiguous. With gaps, every item is both a first and a last. */
.fb-feed .list-group-item { border-radius: var(--bs-border-radius);
  transition: background-color .3s ease, transform .3s ease; }
.fb-feed .list-group-item:hover { transform: translateY(-2px); }
.fb-feed .list-group-item:hover .fb-title { color: var(--fb-accent-warm); }
.fb-title { transition: color .3s ease; }

/* ---- 6. the badge: Bootstrap's .badge, in gilt ---------------------------- */
.fb-badge { color: var(--fb-accent); background: rgba(201,162,75,.1); font-weight: 400; }

/* ---- 7. the coastline: firm on the left, dissolving into the unknown ------ */
.fb-coast { display: block; width: 100%; height: clamp(58px, 9vw, 104px); overflow: visible;
  -webkit-mask-image: linear-gradient(90deg,#000 0%,#000 40%,rgba(0,0,0,.35) 66%,transparent 88%);
          mask-image: linear-gradient(90deg,#000 0%,#000 40%,rgba(0,0,0,.35) 66%,transparent 88%); }
.fb-coast path { fill: none; stroke: var(--fb-accent); stroke-width: 1.6;
  stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .9; }
.fb-coast .land { fill: var(--fb-accent); opacity: .05; stroke: none; }

/* ---- 8. the icons that stand in for a footer nav -------------------------- */
.fb-icon { color: var(--bs-secondary-color); transition: color .2s ease, transform .2s ease; }
.fb-icon svg { width: 55px; height: 55px; display: block; }
.fb-icon:hover, .fb-icon:focus-visible { color: var(--fb-accent); transform: translateY(-1px); }


/* ===========================================================================
 * THE READING PAGE
 * Same bargain as above: Bootstrap owns the grid, the list-group, the figure
 * and the button; this half of the sheet owns the measure, the prose scale and
 * the drop cap — the things a framework has no opinion about.
 * ========================================================================= */

/* ---- 9. the plinth: the landing page's frozen half, repurposed ------------
 * On the landing it's the thesis that stands still. Here it's the piece —
 * kicker, title, dek, plate, the way back — while the words scroll past it.
 * It carries no section nav: the landing page is where you choose what to read,
 * and this page's one job is the piece. Same freeze and the same 992/700 gate
 * as §4, so a 1280x800 laptop behaves the same way on both pages; the plate's
 * 30vh cap (§11) is what keeps the panel inside 700. */
@media (min-width: 992px) and (min-height: 700px) {
  .fb-plinth { position: sticky; top: 0; height: 100dvh; }
}
.fb-wordmark { opacity: .78; transition: opacity .25s ease; }
.fb-wordmark:hover, .fb-wordmark:focus-visible { opacity: 1; }

/* ---- 10. the piece head ---------------------------------------------------
 * Smaller than the landing's .fb-thesis: that one is the whole left half of a
 * page, this one shares its column with a dek, a plate and the way back. */
.fb-piece-title { font-size: clamp(2rem, 2.9vw, 3.3rem); line-height: 1.08;
                  text-wrap: balance; }
.fb-seq { font-family: var(--serif); font-style: italic; color: var(--fb-accent); opacity: .85; }

/* ---- 11. the plate: Bootstrap's .figure, held to a share of the screen ----
 * Cropped, not shrunk, at every width. The plinth is frozen at 100dvh so the
 * plate can only have the height the head and the nav leave it — but it still
 * takes the full width of the column, or it reads as a thumbnail pinned to the
 * margin. Stacked, the same crop stops a 3:2 photo eating a phone screen. */
.fb-plate img { border-radius: var(--bs-border-radius);
                filter: saturate(.9) brightness(.94);
                width: 100%; height: clamp(180px, 30vh, 320px); object-fit: cover; }

/* ---- 12. the measure ------------------------------------------------------
 * The one place the landing's "let the column fill" rule (see §3) is wrong.
 * A feed card can be 900px wide and still read; a paragraph can't. So the
 * words get a hard 42rem and the slack is split, not dumped on the right. */
.fb-measure { max-width: 42rem; }

/* ---- 13. the prose -------------------------------------------------------- */
.fb-prose { font-size: clamp(1.08rem, 1.35vw, 1.19rem); line-height: 1.72; }
.fb-prose p { margin: 0 0 1.45rem; }
.fb-prose h2 { font-family: var(--serif); font-weight: 340; font-size: 1.5rem;
               line-height: 1.2; margin: 2.4rem 0 1rem; }
.fb-prose a { text-decoration: none; border-bottom: 1px solid rgba(201,162,75,.35); }
.fb-prose a:hover { border-bottom-color: var(--fb-accent); }
.fb-prose blockquote { margin: 1.8rem 0; padding-left: 1.2rem; font-style: italic;
                       border-left: 1px solid rgba(201,162,75,.4); }

/* the drop cap: the mark that a piece has begun. Opt-in via .fb-cap, because
   an essay wants one and a question — which opens on its short answer — won't. */
.fb-prose.fb-cap > p:first-of-type::first-letter {
  float: left; font-family: var(--serif); font-weight: 340; color: var(--fb-accent);
  font-size: 4.2em; line-height: .72; padding: .06em .1em 0 0;
}

/* ---- 14. the doors out: the feed's own list-group, at door scale ---------- */
.fb-doors {
  --bs-list-group-item-padding-x: 1.2rem;
  --bs-list-group-item-padding-y: 1.1rem;
}
.fb-doors .fb-title { font-size: 1.3rem; }

/* ---- 15. the chips: Bootstrap's .btn, turned down to a hairline ----------- */
.fb-chip {
  --bs-btn-font-size: .76rem;
  --bs-btn-padding-x: .65rem;
  --bs-btn-padding-y: .28rem;
  --bs-btn-border-radius: 3px;
  --bs-btn-color: var(--bs-secondary-color);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--fb-accent);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: rgba(201,162,75,.4);
}

/* ---- 16. the hairline: the only "how far in am I" instrument -------------- */
.fb-hairline { position: fixed; top: 0; left: 0; z-index: 30; height: 1px; width: 0;
  pointer-events: none; transition: width .12s linear;
  background: linear-gradient(90deg, rgba(201,162,75,.25), var(--fb-accent)); }


/* ===========================================================================
 * THE SECTION PAGES  (/ask-the-apostate/, /liturgies/)
 * The landing page's frame, and Bootstrap's card where the landing has its
 * list-group — so a section reads as a different room in the same house.
 * ========================================================================= */

/* ---- 17. the section head -------------------------------------------------
 * Smaller than .fb-thesis (§3), and wider in the measure. The thesis is the
 * only thing in the landing's left half; this one shares the column with a
 * wordmark above it and a label, a coastline and an intro below. */
.fb-section-title { font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1.06;
                    max-width: 19ch; text-wrap: balance; }

/* the section the reader is standing in, marked in the one accent */
.fb-icon[aria-current] { color: var(--fb-accent); }

/* ---- 18. the cards: Bootstrap's card, wearing the feed's clothes ----------
 * Every rule below is a --bs-card-* variable, exactly as §5 is for the
 * list-group. The card earns its place over the list-group by having a second
 * compartment: the question goes in the body, the way in goes in the footer,
 * and the hairline between them is the component's, not ours.
 *
 * The selector is .fb-cards .card, NOT .fb-cards — and that matters. Bootstrap
 * declares --bs-card-* on .card itself, and a value set on the element always
 * beats one inherited from an ancestor, so the same overrides hung on the row
 * are silently ignored and every card falls back to --bs-body-bg. (§5 gets away
 * with .fb-feed alone because that class sits on the .list-group element.) */
.fb-cards .card {
  --bs-card-bg: var(--fb-card);
  --bs-card-color: var(--bs-body-color);
  --bs-card-border-color: var(--bs-border-color);
  --bs-card-border-radius: var(--bs-border-radius);
  --bs-card-spacer-x: clamp(1.1rem, 1.8vw, 1.5rem);
  --bs-card-spacer-y: clamp(1.1rem, 1.8vw, 1.4rem);
  --bs-card-title-spacer-y: .6rem;
  --bs-card-cap-padding-x: clamp(1.1rem, 1.8vw, 1.5rem);
  --bs-card-cap-padding-y: .7rem;
  --bs-card-cap-bg: transparent;
  --bs-card-cap-color: var(--fb-accent);
}
/* .fb-title is sized in vw (§3), which is wrong here: at xxl the column splits
   in two and the cards get NARROWER as the viewport gets wider. So the card
   title is set in rem, and steps DOWN at the breakpoint where 2-up begins. */
.fb-cards .fb-title { font-size: 1.6rem; }
@media (min-width: 1400px) { .fb-cards .fb-title { font-size: 1.42rem; } }

.fb-cards .card { transition: background-color .3s ease, border-color .3s ease,
                              transform .3s ease; }
.fb-cards .card:hover { background: var(--fb-card-hover);
                        border-color: rgba(201,162,75,.35); transform: translateY(-2px); }
.fb-cards .card:hover .fb-title,
.fb-cards .card:hover .card-footer { color: var(--fb-accent-warm); }
/* the browser's default ring is invisible on this ground */
.fb-cards .card:focus-visible { outline: 1px solid var(--fb-accent); outline-offset: 3px; }


/* ===========================================================================
 * THE FORM  (/leave-word/)
 * ========================================================================= */

/* ---- 19. leaving word ----------------------------------------------------
 * .form-control is the one Bootstrap component that is NOT variable-driven:
 * it reads --bs-body-bg and --bs-border-color directly, and :focus hard-codes
 * Bootstrap blue (#86b7fe with an rgba(13,110,253,…) ring). On this ground
 * that reads as a browser default someone forgot to style, so the focus state
 * has to be written out rather than handed over as a variable. */
.fb-form { max-width: 34rem; }

/* The sidebar centres its block in a frozen 100dvh panel (§4). A feed can start
   at the top opposite that, because a feed is scanned — but a form is read
   before it is used, and floating it at the top-right leaves the explanation
   stranded halfway down the other column. So the form column takes the same
   height and the same centring, and the two halves line up. Gated exactly like
   §4: below it, the columns stack and centring is meaningless. */
@media (min-width: 992px) and (min-height: 700px) {
  .fb-formcol { min-height: 100dvh; display: flex; flex-direction: column;
                justify-content: center; }
}

/* a shade lighter than a card (§18): a card is a surface to read, a field is a
   surface to type into, and it has to look like it will take an answer */
.fb-form .form-control {
  background-color: rgba(233,236,223,.045);
  border-color: var(--bs-border-color);
  padding: .6rem .8rem;
}
.fb-form .form-control:focus {
  background-color: rgba(233,236,223,.06);
  border-color: rgba(201,162,75,.55);
  box-shadow: 0 0 0 .18rem rgba(201,162,75,.16);
}
.fb-form .form-control::placeholder { color: var(--bs-secondary-color); opacity: .5; }
.fb-form textarea.form-control { line-height: 1.65; resize: vertical; }
.fb-form .form-label { color: var(--bs-secondary-color); font-size: .82rem;
                       letter-spacing: .02em; }
.fb-form .form-text { max-width: 46ch; }

/* the honeypot: off-screen, never shown to a human. Same trap, and the same
   field name, as the footer form the site already ships. */
.fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* the one filled button on the site — see the note in §1 on why this can't
   just be .btn-warning */
.fb-btn {
  --bs-btn-color: var(--fb-ground);
  --bs-btn-bg: var(--fb-accent);
  --bs-btn-border-color: var(--fb-accent);
  --bs-btn-hover-color: var(--fb-ground);
  --bs-btn-hover-bg: var(--fb-accent-warm);
  --bs-btn-hover-border-color: var(--fb-accent-warm);
  --bs-btn-active-color: var(--fb-ground);
  --bs-btn-active-bg: var(--fb-accent-warm);
  --bs-btn-active-border-color: var(--fb-accent-warm);
  --bs-btn-padding-x: 1.4rem;
  --bs-btn-padding-y: .5rem;
}


/* ===========================================================================
 * THE LITURGIES  (/liturgies/, and any piece with `format: liturgy`)
 * ========================================================================= */

/* ---- 20. the older register ----------------------------------------------
 * The KJV-pastiche pieces are verse in everything but lineation: long periodic
 * sentences joined by "and", meant to be heard. They get air between the
 * paragraphs and a slightly longer line-height, and they do NOT get the drop
 * cap (§13) — the cap marks where an essay begins its slow approach to an
 * object, and these begin already inside the cadence. */
.fb-prose.fb-verse { line-height: 1.85; }
.fb-prose.fb-verse p { margin: 0 0 1.9rem; text-indent: 0; }
.fb-prose.fb-verse p:first-of-type { font-style: italic; color: var(--bs-secondary-color); }


/* ---- 21. the signup ------------------------------------------------------
 * The one ask on the site, at the foot of a piece and of the feed. It borrows
 * the form surfaces from §19 wholesale — a field is a field — and adds only a
 * heading in the serif and a cap on the input, so that on a wide reading column
 * it stays a line rather than stretching into a banner. */
.fb-signup-h { font-size: 1.25rem; font-weight: 340; color: var(--bs-body-color); }
.fb-signup .form-control { max-width: 22rem; flex: 1 1 14rem; }
.fb-signup .form-text { max-width: 52ch; }