/* ==========================================================================
   LFFO — THE RECORD: privacy policy, terms of use, legal notice
   --------------------------------------------------------------------------
   These three pages are the only ones on the site that are not built in
   Elementor. They are plain WordPress post_content, which is the right way to
   hold them -- a legal text should be a document, editable by whoever has to
   change a clause, not a layout that has to be rebuilt around the change.

   What they were missing was not structure but TYPOGRAPHY. The theme's default
   article styling set them in the same measure as the rest of the page, which
   on a wide screen runs to a hundred and thirty characters a line, and gave
   every heading the same weight, so a reader had no way to see the shape of
   the document without reading all of it.

   So nothing here touches the words. It gives them a measure they can be read
   in, a heading scale that shows the hierarchy at a glance, a contents rail
   that says how long the document is and where you are in it, and a dateline
   that is legible as a date rather than as a first sentence. The palette,
   the two typefaces and the gold hairline are the site's own.
   ========================================================================== */

/* ---- the shell ---------------------------------------------------------- */
body.lffo-legal .post-thumbnail,
body.lffo-legal   .post-thumbnail { display: none !important; }body.lffo-legal .boxes-header .cover,
body.lffo-legal   .boxes-header .cover { display: block; }body.lffo-legal .container-page,
body.lffo-legal   .container-page {
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(28px, 5vw, 64px) clamp(18px, 4vw, 40px) clamp(56px, 8vw, 104px);
}body.lffo-legal .myrow { display: block; }body.lffo-legal .content { width: 100%; max-width: none; float: none; }

/* ---- the masthead ------------------------------------------------------- */
.lg-head { margin: 0 0 clamp(26px, 4vw, 44px); }
.lg-head .eyebrow-line {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--sans, "Inter", system-ui, sans-serif);
  font-size: .70rem; font-weight: 600; letter-spacing: .19em; text-transform: uppercase;
  color: var(--gold-deep, #a07c33); margin-bottom: 14px;
}
.lg-head .eyebrow-line::before {
  content: ""; width: 34px; height: 1px; background: var(--gold, #c9a34e); opacity: .8; flex: 0 0 auto;
}body.lffo-legal .the-title h1,
body.lffo-legal   .the-title h1 {
  font-family: var(--serif, "Cormorant Garamond", Georgia, serif);
  font-style: italic; font-weight: 500;
  font-size: clamp(2.1rem, 4.6vw, 3.25rem);
  line-height: 1.06; letter-spacing: -0.015em;
  color: var(--navy, #0f2038);
  margin: 0 0 18px;
}body.lffo-legal .the-title { position: relative; }body.lffo-legal .the-title::after,
body.lffo-legal   .the-title::after {
  content: ""; display: block; width: 96px; height: 2px;
  background: linear-gradient(90deg, var(--gold, #c9a34e), rgba(201,163,78,0));
  margin-bottom: 22px;
}

/* The dateline: the document's first paragraph is "Last updated: …" in
   italics. It is a fact about the document, not the opening of it, so it is
   set as a dateline rather than as prose. */
body.lffo-legal .the-content > p:first-child,
body.lffo-legal   .the-content > p:first-child {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans, "Inter", system-ui, sans-serif);
  font-size: .78rem; font-style: normal; letter-spacing: .04em;
  color: var(--ink-soft, #5b6b82);
  border: 1px solid var(--line, #dde4ef);
  border-radius: 999px; padding: 6px 15px 6px 12px;
  margin: 0 0 clamp(26px, 4vw, 40px);
  background: #fff;
}body.lffo-legal .the-content > p:first-child em,
body.lffo-legal   .the-content > p:first-child em { font-style: normal; }body.lffo-legal .the-content > p:first-child::before,
body.lffo-legal   .the-content > p:first-child::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold, #c9a34e); flex: 0 0 auto;
}

/* ---- two columns: the contents rail, and the document ------------------- */
.lg-wrap { display: block; }
@media (min-width: 1020px) {
  .lg-wrap {
    display: grid;
    grid-template-columns: 216px minmax(0, 1fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: start;
  }
}

.lg-toc { display: none; }
@media (min-width: 1020px) {
  .lg-toc {
    display: block; position: sticky; top: calc(var(--header-h, 75px) + 26px);
    max-height: calc(100vh - var(--header-h, 75px) - 60px); overflow: auto;
    padding-left: 18px; border-left: 1px solid var(--line, #dde4ef);
  }
  .lg-toc-title {
    font-family: var(--sans, "Inter", system-ui, sans-serif);
    font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: var(--ink-soft, #5b6b82); margin: 0 0 14px;
  }
  .lg-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: lgc; }
  .lg-toc li { margin: 0 0 2px; }
  .lg-toc a {
    display: flex; gap: 10px; align-items: baseline;
    font-family: var(--sans, "Inter", system-ui, sans-serif);
    font-size: .805rem; line-height: 1.35; letter-spacing: -.005em;
    color: var(--ink-soft, #5b6b82); text-decoration: none;
    padding: 6px 8px 6px 0; border-radius: 4px;
    transition: color .22s var(--ease, cubic-bezier(.4,0,.2,1));
  }
  .lg-toc a::before {
    counter-increment: lgc; content: counter(lgc, decimal-leading-zero);
    font-size: .64rem; font-weight: 600; letter-spacing: .06em;
    color: var(--gold-deep, #a07c33); opacity: .55; flex: 0 0 auto; min-width: 1.5em;
  }
  .lg-toc a:hover { color: var(--navy, #0f2038); }
  .lg-toc a:hover::before { opacity: .9; }
  .lg-toc a[aria-current="true"] { color: var(--navy, #0f2038); font-weight: 600; }
  .lg-toc a[aria-current="true"]::before { opacity: 1; }
}

/* ---- the document ------------------------------------------------------- */
body.lffo-legal .the-content,
body.lffo-legal   .the-content {
  max-width: 68ch;
  font-family: var(--sans, "Inter", system-ui, sans-serif);
  font-size: 1.0rem; line-height: 1.72; color: var(--ink, #35415a);
  letter-spacing: -.003em;
}body.lffo-legal .the-content p,
body.lffo-legal   .the-content p { margin: 0 0 1.05em; }body.lffo-legal .the-content h2,
body.lffo-legal   .the-content h2 {
  font-family: var(--serif, "Cormorant Garamond", Georgia, serif);
  font-weight: 600; font-size: clamp(1.42rem, 2.5vw, 1.72rem); line-height: 1.18;
  color: var(--navy, #0f2038); letter-spacing: -.01em;
  margin: clamp(38px, 5vw, 58px) 0 14px;
  padding-top: clamp(20px, 3vw, 30px);
  border-top: 1px solid var(--line, #dde4ef);
  scroll-margin-top: calc(var(--header-h, 75px) + 24px);
  position: relative;
}body.lffo-legal .the-content h2::before,
body.lffo-legal   .the-content h2::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 46px; height: 1px;
  background: var(--gold, #c9a34e);
}body.lffo-legal .the-content > h2:first-of-type,
body.lffo-legal   .the-content > h2:first-of-type { margin-top: 0; }body.lffo-legal .the-content h3,
body.lffo-legal   .the-content h3 {
  font-family: var(--sans, "Inter", system-ui, sans-serif);
  font-weight: 650; font-size: .95rem; line-height: 1.4;
  letter-spacing: .01em; color: var(--navy, #0f2038);
  margin: 26px 0 9px;
  scroll-margin-top: calc(var(--header-h, 75px) + 24px);
}

/* A paragraph that opens with a bolded label -- "Legal basis:", "Retention:"
   -- is a definition, not a sentence with emphasis in it. It is set as one. */
body.lffo-legal .the-content p > strong:first-child,
body.lffo-legal   .the-content p > strong:first-child {
  font-weight: 650; color: var(--navy, #0f2038);
}body.lffo-legal .the-content ul,
body.lffo-legal   .the-content ul { list-style: none; margin: 0 0 1.15em; padding: 0; }body.lffo-legal .the-content ul li,
body.lffo-legal   .the-content ul li {
  position: relative; padding-left: 22px; margin: 0 0 .52em;
}body.lffo-legal .the-content ul li::before,
body.lffo-legal   .the-content ul li::before {
  content: ""; position: absolute; left: 2px; top: .68em;
  width: 7px; height: 7px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--gold, #c9a34e); opacity: .72;
}body.lffo-legal .the-content a,
body.lffo-legal   .the-content a {
  color: var(--brown, #7a5238); text-decoration: none;
  box-shadow: inset 0 -1px 0 rgba(122,82,56,.32);
  transition: box-shadow .2s var(--ease, cubic-bezier(.4,0,.2,1)), color .2s var(--ease, cubic-bezier(.4,0,.2,1));
}body.lffo-legal .the-content a:hover,
body.lffo-legal   .the-content a:hover {
  color: var(--navy, #0f2038); box-shadow: inset 0 -1px 0 var(--gold, #c9a34e);
}

/* ---- the other two documents, at the foot ------------------------------- */
.lg-also {
  margin-top: clamp(44px, 6vw, 72px);
  padding-top: 26px;
  border-top: 1px solid var(--line, #dde4ef);
  max-width: 68ch;
}
.lg-also-t {
  font-family: var(--sans, "Inter", system-ui, sans-serif);
  font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-soft, #5b6b82); margin: 0 0 14px;
}
.lg-also-row { display: flex; flex-wrap: wrap; gap: 10px; }
.lg-also-row a {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans, "Inter", system-ui, sans-serif);
  font-size: .845rem; letter-spacing: -.005em;
  color: var(--navy, #0f2038); text-decoration: none;
  border: 1px solid var(--line, #dde4ef); border-radius: 10px;
  padding: 10px 16px; background: #fff; box-shadow: none;
  transition: border-color .24s var(--ease, cubic-bezier(.4,0,.2,1)), color .24s var(--ease, cubic-bezier(.4,0,.2,1));
}
.lg-also-row a::before {
  content: ""; width: 6px; height: 6px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); background: var(--gold, #c9a34e); flex: 0 0 auto;
}
.lg-also-row a:hover { border-color: var(--gold, #c9a34e); color: var(--gold-deep, #a07c33); }

/* ---- print -------------------------------------------------------------- */
@media print {.lg-toc,
.lg-also,
.site-header,
header.header,
footer,
.box-scroll-to-top { display: none !important; }body.lffo-legal .the-content,
body.lffo-legal   .the-content { max-width: none; font-size: 10.5pt; line-height: 1.5; color: #000; }body.lffo-legal .the-content h2,
body.lffo-legal   .the-content h2 { break-after: avoid; page-break-after: avoid; }
}

/* ---- the masthead sits on the theme's navy page-hero --------------------
   The theme gives a singular page a navy gradient band above the article, and
   the rest of the site uses exactly that band as its page hero. So the record
   keeps it rather than painting over it, and the type is set for a dark ground:
   cream for the title, bright gold for the eyebrow and the rule, because the
   deep gold disappears into navy. */
body.lffo-legal .boxes-header,
body.lffo-legal   .boxes-header {
  padding: clamp(96px, 12vw, 148px) 0 clamp(38px, 5vw, 58px) !important;
}body.lffo-legal .boxes-header .cover,
body.lffo-legal   .boxes-header .cover {
  max-width: 1180px; margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 40px);
}body.lffo-legal .boxes-header .image,
body.lffo-legal   .boxes-header .image { display: none !important; }body.lffo-legal .boxes-header .the-title h1,
body.lffo-legal   .boxes-header .the-title h1 {
  color: #fbf8f0;
  margin-bottom: 16px;
}body.lffo-legal .lg-head .eyebrow-line,
body.lffo-legal   .lg-head .eyebrow-line { color: var(--gold-bright, #dcb763); }body.lffo-legal .lg-head .eyebrow-line::before,
body.lffo-legal   .lg-head .eyebrow-line::before { background: var(--gold-bright, #dcb763); }body.lffo-legal .boxes-header .the-title::after,
body.lffo-legal   .boxes-header .the-title::after {
  background: linear-gradient(90deg, var(--gold-bright, #dcb763), rgba(220,183,99,0));
  margin-bottom: 0;
}

/* the article itself starts on white, clear of the band */
body.lffo-legal .boxes-content,
body.lffo-legal   .boxes-content { padding-top: clamp(30px, 5vw, 52px); }

/* The navy band is the page's hero, so it runs to both edges of the window
   rather than sitting inside the article's column as a floating panel. */
body.lffo-legal .boxes-header,
body.lffo-legal   .boxes-header {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
body.lffo-legal { overflow-x: clip; }
body.lffo-legal .container-page { padding-top: 0; }