/* bernard Trust - quiet document style.
   Layout copied from the bernardmoves.com legal pages (src/app/(public)/_legal/legal-doc.tsx)
   and the public footer (src/app/(public)/_doorstep/footer.tsx), using the computed values of
   the live pages on 2026-10-05. Colours are the shoreline tokens in src/app/globals.css (PRD 181). */
:root {
  --paper: #f7f1e5;
  --ink: #22332f;
  --ink-soft: #54635e;
  --sea: #1c5e53;
  --sea-deep: #143f38;
  --line: #d8cbaf;
  --sky: #8aaec0;
  --navy: #163c5c;
  --gold: #b98a2f;
  --ember: #b5582e;
  --brick: #8a3a1f;
  --font-display: "Fraunces", serif;
  --font-body: "Newsreader", georgia, serif;
  --font-mono: "Spline Sans Mono", monospace;
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; font-family: var(--font-sans); }
body { background: var(--paper); color: var(--ink); }
a { color: inherit; text-decoration: inherit; }
ol, ul { list-style: none; }
svg { display: block; vertical-align: middle; }
table { border-collapse: collapse; }
:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; border-radius: 2px; }

/* Legal page: main.min-h-screen.bg-paper.px-6.py-12 > div.mx-auto.max-w-3xl */
.page { min-height: 100vh; background: var(--paper); padding: 32px 24px 48px; }
@media (min-width: 640px) { .page { padding-top: 48px; } }
.col { margin: 0 auto; max-width: 768px; }

/* Header (2026-10-05 redesign): draft strip, brand row with the one filled invitation, section nav.
   Order of attention: brand, site name, main action, sections, page title. Shoreline tokens only.
   Contrast: ink on the strip tint 10+:1, white on ember 4.77:1, ink-soft on paper 5.62:1. */
.draft-strip { background: color-mix(in srgb, var(--sky) 22%, var(--paper)); border-bottom: 1px solid color-mix(in srgb, var(--sky) 45%, var(--paper)); }
.strip-inner { margin: 0 auto; max-width: 1080px; padding: 6px 24px; font-family: var(--font-mono); font-size: 11.5px; line-height: 18px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.site-head { background: var(--paper); border-bottom: 1px solid var(--line); }
.head-inner { margin: 0 auto; max-width: 1080px; padding: 20px 24px 0; }
.brand-row { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.brand { display: flex; align-items: center; gap: 14px; align-self: flex-start; color: var(--ink); }
.brand .lockup { height: 28px; width: auto; aspect-ratio: 889.11 / 244.93; }
.brand-div { display: block; width: 1px; height: 26px; background: var(--line); }
.brand-name { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.head-cta { display: block; padding: 12px 20px; border-radius: 4px; background: var(--ember); color: #fff; text-align: center; font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.head-cta:hover, .head-cta:focus-visible { background: var(--brick); }
.head-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sections { margin: 12px -24px 0; padding: 0 24px; display: flex; flex-wrap: nowrap; gap: 22px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; font-family: var(--font-sans); font-size: 15px; line-height: 22px; color: var(--ink-soft); }
.sections::-webkit-scrollbar { display: none; }
.sections a { flex: 0 0 auto; padding: 10px 0 12px; white-space: nowrap; scroll-snap-align: start; text-decoration: none; }
.sections a:hover { color: var(--ink); }
.sections a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--sea); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.sections a:focus-visible { outline-offset: -2px; }
@media (min-width: 640px) {
  /* Same box as the reading column (.page 24px gutter + .col 768px), so lockup, title and text share one left edge. */
  .strip-inner, .head-inner { max-width: 816px; padding-left: 24px; padding-right: 24px; }
  .head-inner { padding-top: 24px; }
  .brand-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .brand { align-self: auto; }
  .head-cta { display: inline-block; }
  /* Wide screens: inline links with balanced wrapping, so 8 items break 4 + 4, never 6 + 2. */
  .sections { display: block; margin: 16px 0 0; padding: 0; overflow: visible; text-wrap: balance; }
  .sections a { display: inline-block; margin-right: 20px; }
  .sections a:last-child { margin-right: 0; }
}

/* Page title: Fraunces, 32px phone / 44px desktop, Last updated directly under it. */
.title { font-family: var(--font-display); font-size: 32px; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
@media (min-width: 640px) { .title { font-size: 44px; line-height: 1.1; } }
/* p.mt-3.font-mono.text-[12px].uppercase.tracking-[0.12em].text-ink-soft */
.updated { margin-top: 12px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); }

/* div.mt-8.space-y-4.text-[17px].leading-relaxed.text-ink + the ReactMarkdown component map */
.doc { margin-top: 32px; font-size: 17px; line-height: 1.625; color: var(--ink); }
.doc > :not(:last-child) { margin-bottom: 16px; }
.doc h2 { margin-top: 40px; font-family: var(--font-display); font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.doc h3 { margin-top: 24px; font-family: var(--font-display); font-size: 18px; line-height: 28px; font-weight: 600; color: var(--ink); }
.doc p { color: var(--ink-soft); }
.doc a { font-weight: 500; color: var(--sea); text-decoration: underline; }
.doc ol { list-style: decimal; padding-left: 20px; color: var(--ink-soft); }
.doc ul { list-style: disc; padding-left: 20px; color: var(--ink-soft); }
.doc li:not(:last-child) { margin-bottom: 8px; }
.doc strong { font-weight: 600; color: var(--ink); }
.doc .table-wrap { overflow-x: auto; }
.doc table { margin: 16px 0; width: 100%; border-collapse: collapse; font-size: 15px; color: var(--ink-soft); }
.doc th { border: 1px solid var(--line); background: #fff; padding: 8px 12px; text-align: left; font-weight: 600; color: var(--ink); }
.doc td { border: 1px solid var(--line); padding: 8px 12px; vertical-align: top; }
@media (min-width: 768px) { .doc td, .doc td a { overflow-wrap: anywhere; } }
.doc thead:has(th:empty:first-child + th:empty:last-child) { display: none; }

/* Public footer (footer.px-0.pb-24), mobile first; sm = 640px. */
.site-foot { padding: 0 0 96px; font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: var(--ink); }
.shore { display: flex; flex-direction: column; }
.shore span { display: block; height: 5px; width: 100%; }
.shore .sky { background: var(--sky); }
.shore .navy { background: var(--navy); }
.shore .gold { background: var(--gold); }
.foot-row { margin: 42px auto 0; display: flex; max-width: 1080px; flex-direction: column; gap: 16px; padding: 0 28px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); }
.foot-brand { display: flex; width: 100%; flex-direction: row-reverse; align-items: flex-start; justify-content: space-between; gap: 12px; }
.foot-head { height: 68px; width: auto; aspect-ratio: 170 / 185.62; transform: rotate(-2deg); }
.foot-lines { display: flex; flex-direction: column; gap: 4px; }
.foot-lines > span { padding: 0; line-height: 20px; }
.foot-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.foot-links { display: flex; flex-wrap: wrap; column-gap: 20px; line-height: 20px; }
.foot-links a, .foot-moving a { display: inline-block; padding: 4px 0; }
.foot-moving { display: flex; flex-wrap: wrap; column-gap: 16px; line-height: 20px; }
.foot-moving .lbl { flex-basis: 100%; padding: 4px 0; color: rgb(84 99 94 / 0.7); }
.foot-green { padding: 4px 0; font-weight: 700; line-height: 20px; color: var(--sea-deep); }
.foot-green a:hover { text-decoration: underline; }
.foot-row .nowrap { white-space: nowrap; }
.foot-lines a:hover, .foot-links a:hover, .foot-moving a:hover { color: var(--ink); text-decoration: underline; }
@media (min-width: 640px) {
  .foot-row { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 20px; }
  .foot-brand { width: auto; flex-direction: row; justify-content: flex-start; }
  .foot-head { height: 44px; }
  .foot-lines { gap: 6px; }
  .foot-lines > span { padding: 4px 0; }
  .foot-nav { min-width: 0; flex: 1 1 0%; align-items: flex-end; gap: 6px; }
  .foot-links { justify-content: flex-end; }
  .foot-moving { column-gap: 20px; justify-content: flex-end; }
  .foot-moving .lbl { flex-basis: auto; }
}

/* Repeated invitation in the body: ember OUTLINE (4.77:1 on white); fills on hover/focus. */
.doc .cta-row { padding-top: 8px; }
.doc a.cta { display: inline-block; padding: 11px 19px; border-radius: 4px; border: 1px solid var(--ember); background: #fff; color: var(--ember); font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
.doc a.cta:hover, .doc a.cta:focus-visible { background: var(--ember); color: #fff; }

/* bernard:scaffold-styles - managed by scaffoldFaq/scaffoldAnnouncement; edits inside are replaced */
[data-bernard-faq]{margin:3rem auto;max-width:52rem;padding:0 1.25rem}
[data-bernard-faq]>h2{margin-bottom:1.25rem}
[data-bernard-faq] .faq-item{padding:1rem 0;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)}
[data-bernard-faq] .faq-item h3{margin:0 0 .4rem}
[data-bernard-faq] .faq-item p{margin:0}
[data-bernard-announcement]{padding:.85rem 1.25rem;text-align:center;border-top:3px solid #22332f;border-bottom:1px solid color-mix(in srgb,#22332f 30%,transparent);background:color-mix(in srgb,#22332f 8%,transparent)}
[data-bernard-announcement] h2{margin:0;font-size:1.1em}
[data-bernard-announcement] p{margin:.2rem 0 0}
[data-bernard-testimonials]{margin:3rem auto;max-width:56rem;padding:0 1.25rem}
[data-bernard-testimonials]>h2{margin-bottom:1.5rem}
[data-bernard-testimonials] .testimonial{margin:0 0 1.75rem;padding:1.25rem 0;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)}
[data-bernard-testimonials] blockquote{margin:0;border-left:3px solid #22332f;padding-left:1rem}
[data-bernard-testimonials] blockquote p{margin:0}
[data-bernard-testimonials] figcaption{margin-top:.6rem;font-size:.9em}
[data-bernard-testimonials] .testimonial-detail{display:block;opacity:.75}
[data-bernard-testimonials] img{width:48px;height:48px;border-radius:50%;object-fit:cover;float:left;margin:0 .85rem 0 0}
[data-bernard-testimonials] .testimonial-note{font-size:.85em;opacity:.75;margin:0}
[data-bernard-form-section]{margin:3rem auto;max-width:32rem;padding:1.75rem 1.25rem;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)}
[data-bernard-form-section]>h2{margin:0 0 .5rem}
[data-bernard-form-section]>p{margin:0 0 1.25rem}
[data-bernard-form]{display:flex;flex-direction:column;gap:.9rem;margin:0}
[data-bernard-form] .bnd-form-field{display:flex;flex-direction:column;gap:.35rem}
[data-bernard-form] .bnd-form-field label{font-size:.9em}
[data-bernard-form] input:not([type=checkbox]),[data-bernard-form] textarea{font:inherit;color:inherit;background:transparent;padding:.6rem .75rem;border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:6px;width:100%;box-sizing:border-box}
[data-bernard-form] input:focus-visible,[data-bernard-form] textarea:focus-visible{outline:2px solid #22332f;outline-offset:1px}
[data-bernard-form] .bnd-form-consent{display:flex;gap:.55rem;align-items:flex-start;font-size:.9em}
[data-bernard-form] .bnd-form-consent input{margin:.25em 0 0}
[data-bernard-form] button[type=submit]{font:inherit;padding:.65rem 1.5rem;border-radius:6px;cursor:pointer;align-self:flex-start;background:#22332f;color:#ffffff;border:none}
[data-bernard-form] [data-bernard-form-feedback]{font-size:.9em;margin:0}
/* bernard:scaffold-styles:end */
