/* Amelia's Catering Kitchen & Events — stylesheet for the two policy pages.
   Was legal-drafts.css in the research folder; moved here 2026-08-11 by Kai and renamed, so the
   policy pages no longer link a drafting stylesheet. Contents unchanged apart from this header.

   Two rules below are DRAFT-ONLY and come out at launch, together with the markup they style:
     .draft-banner — the red "FOR ATTORNEY REVIEW" bar. Remove the <div> when the attorney signs off.
     .placeholder  — bold dark red, marks an unconfirmed fact. Removing the rule does NOT make a
                     bracket safe; the bracket text itself must be replaced with the real fact.

   GUARDRAIL: .placeholder renders as VISIBLE BOLD BODY TEXT to anyone reading the page. It is not
   a comment. Internal team notes must go in <!-- --> instead — putting them in a .placeholder span
   ships our own internal commentary to the client and their attorney. (Open Rune finding against
   the current policy text; the text is Vera's lane, this note is here so the mechanism is obvious.)

   index.html does NOT use this file — its CSS is inline, and it carries its own copy of the
   .placeholder rule so the bracket convention is identical across all three pages. If you change
   the .placeholder colour here, change it there too. */

:root {
  --ink: #16130e;
  --ink-soft: #30291e;
  --gold: #c8a447;
  --gold-dark: #806419;
  --cream: #f8f3e8;
  --paper: #fffdf8;
  --line: #d7c7a9;
  --muted: #675e50;
  --display: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink-soft); background: var(--cream); font-family: var(--body); line-height: 1.62; }
a { color: #614c12; font-weight: 750; }
h1, h2, p { margin-top: 0; }
h1, h2 { color: var(--ink); font-family: var(--display); line-height: 1.1; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.wrap { width: min(840px, calc(100% - 36px)); margin: 0 auto; }
.draft-banner { padding: 10px 18px; color: #fff9ed; background: #7e281b; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-align: center; }
.site-header { border-bottom: 2px solid var(--gold); background: var(--ink); }
.site-header .wrap { display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--cream); font-family: var(--display); font-size: 19px; text-decoration: none; }
.brand img { width: 52px; height: 52px; object-fit: contain; }
.back-link { color: #f0d989; font-size: 13px; text-decoration: none; }
main { padding: 54px 0 72px; }
.kicker { margin-bottom: 12px; color: var(--gold-dark); font-size: 11px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
h1 { margin-bottom: 14px; font-size: clamp(38px, 7vw, 58px); }
.effective { margin-bottom: 30px; color: var(--muted); font-size: 14px; }
.notice { margin: 0 0 32px; padding: 18px 20px; border-left: 4px solid var(--gold); color: #4b3c20; background: #f4e9c9; }
.policy { padding: 30px; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 16px 35px rgba(43, 31, 10, .06); }
.policy section + section { margin-top: 31px; }
h2 { margin-bottom: 10px; font-size: 27px; }
.policy p:last-child { margin-bottom: 0; }
.policy ul { margin: 0 0 0 18px; padding: 0; }
.policy li + li { margin-top: 7px; }
.placeholder { color: #7e281b; font-weight: 800; }
.site-footer { padding: 31px 0; border-top: 2px solid var(--gold); color: #c9bda6; background: #100e0a; font-size: 13px; }
.site-footer a { color: #f0d989; }

@media (max-width: 580px) {
  .site-header .wrap { min-height: 0; padding: 12px 0; align-items: flex-start; flex-direction: column; }
  .policy { padding: 23px 19px; }
}