/* =========================================================
   LEGAL PAGES — privacy-policy.html, terms-and-conditions.html.
   Loaded after portal.css and reuses its tokens (colours, fonts,
   radii, shadows), .logo and .btn. Only legal-page typography and
   layout live here; everything is scoped under .lg-*.
   ========================================================= */
:root{
  --lg-header-h:68px;
  --lg-gutter:clamp(16px, 4vw, 48px);
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body.lg{font-size:16.5px;line-height:1.7;display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.lg-container{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--lg-gutter)}
.lg-skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--navy);color:var(--ivory);padding:10px 16px;border-radius:var(--radius-sm);font-weight:700;font-size:14px}
.lg-skip:focus{top:12px}

/* Inline icons (lucide paths, stroke inherits currentColor) */
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Header ---------- */
.lg-header{position:sticky;top:0;z-index:50;height:var(--lg-header-h);background:rgba(250,249,246,.88);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.lg-header .lg-container{height:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}
.lg-header .logo{color:var(--navy)}
.lg-header .btn .ic{width:16px;height:16px}

/* ---------- Title block ---------- */
.lg-hero{padding-block:clamp(40px, 7vw, 80px) clamp(28px, 4vw, 44px);border-bottom:1px solid var(--line)}
.lg-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.lg-hero h1{margin-top:12px;font-size:clamp(36px, 6vw, 60px);line-height:1.02;letter-spacing:-.035em;font-weight:800;color:var(--navy-dark)}
.lg-hero h1 .serif{color:var(--teal)}
.lg-dates{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px;color:var(--muted)}
.lg-dates b{font-weight:700;color:var(--navy-dark);margin-right:6px}
.lg-lead{margin-top:22px;max-width:68ch;font-size:clamp(17px, 1.6vw, 18.5px);line-height:1.7;color:var(--text)}

/* Values the client still has to supply */
.ph{display:inline-block;background:var(--gold-soft);color:#6F5220;border:1px dashed var(--gold-deep);border-radius:6px;padding:0 7px;font-size:.92em;font-weight:700;line-height:1.6}

/* ---------- Layout ---------- */
.lg-main{flex:1}
.lg-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding-block:28px clamp(56px, 8vw, 96px)}
@media (min-width:1024px){
  .lg-layout{grid-template-columns:220px minmax(0,780px);justify-content:space-between;gap:64px;padding-top:44px}
}

/* ---------- On this page ---------- */
.lg-toc{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.lg-toc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;cursor:pointer;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--navy-dark)}
.lg-toc summary::-webkit-details-marker{display:none}
.lg-toc summary .ic{width:16px;height:16px;color:var(--muted);transition:transform .25s var(--ease)}
.lg-toc[open] summary .ic{transform:rotate(180deg)}
.lg-toc ol{padding:0 8px 12px;display:grid;gap:1px;font-size:14px;line-height:1.4}
.lg-toc a{display:block;padding:7px 10px;border-radius:8px;color:var(--muted);font-weight:600;transition:color .2s, background-color .2s}
.lg-toc a:hover{color:var(--navy);background:var(--surface)}
.lg-toc a[aria-current="true"]{color:var(--navy-dark);background:var(--teal-soft)}
@media (min-width:1024px){
  .lg-toc{position:sticky;top:calc(var(--lg-header-h) + 28px);align-self:start;max-height:calc(100vh - var(--lg-header-h) - 56px);overflow-y:auto;background:transparent;border:0;box-shadow:none;border-radius:0}
  .lg-toc summary{padding:0 0 14px 12px;cursor:default;pointer-events:none}
  .lg-toc summary .ic{display:none}
  .lg-toc ol{padding:0;border-left:1px solid var(--line-strong);font-size:13.5px}
  .lg-toc a{border-radius:0 8px 8px 0;margin-left:-1px;border-left:2px solid transparent;padding:6px 12px}
  .lg-toc a[aria-current="true"]{border-left-color:var(--teal);background:transparent}
}

/* ---------- Document body ---------- */
.lg-doc section{padding-block:28px;border-top:1px solid var(--line);scroll-margin-top:calc(var(--lg-header-h) + 16px)}
.lg-doc section:first-child{border-top:0;padding-top:0}
.lg-doc h2{font-size:clamp(20px, 2.2vw, 23px);line-height:1.25;letter-spacing:-.02em;font-weight:800;color:var(--navy-dark);display:flex;align-items:baseline;gap:10px}
.lg-num{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.25em;color:var(--gold-deep);letter-spacing:0;min-width:1.3em}
.lg-doc p{margin-top:12px;color:var(--text)}
.lg-doc h2 + p, .lg-doc h2 + ul{margin-top:14px}
.lg-doc ul.lg-list{margin-top:14px;display:grid;gap:10px}
.lg-list li{position:relative;padding-left:22px}
.lg-list li::before{content:"";position:absolute;left:3px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.lg-list strong{color:var(--navy-dark);font-weight:700}
.lg-doc a:not(.lg-contact__link){color:var(--teal);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Editor note — visible reminder of something still to be decided */
.lg-note{margin-top:16px;display:flex;gap:12px;padding:14px 16px;border-radius:12px;background:var(--amber-soft);border:1px solid rgba(181,71,8,.22);color:#7A2E0B;font-size:14.5px;line-height:1.6}
.lg-note .ic{color:var(--amber);margin-top:3px}
.lg-note p{margin:0;color:inherit}
.lg-note b{font-weight:800}

/* ---------- Contact card ---------- */
.lg-contact{margin-top:18px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.lg-contact__brand{padding:16px 20px;border-bottom:1px solid var(--line);font-weight:800;letter-spacing:.2em;font-size:13.5px;color:var(--navy-dark);display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lg-contact__brand .serif{letter-spacing:-.01em;font-size:18px;color:var(--teal)}
.lg-contact ul{display:grid;grid-template-columns:minmax(0,1fr)}
.lg-contact li + li{border-top:1px solid var(--line)}
.lg-contact__link{display:flex;align-items:center;gap:14px;padding:13px 20px;transition:background-color .2s}
.lg-contact__link:hover{background:var(--surface)}
.lg-contact__icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--teal-soft);color:var(--teal);flex:none}
.lg-contact__icon .ic{width:17px;height:17px}
.lg-contact__label{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted);line-height:1.3}
.lg-contact__value{display:block;font-weight:700;color:var(--navy-dark);line-height:1.4;overflow-wrap:anywhere}
@media (min-width:640px){
  .lg-contact ul{grid-template-columns:repeat(2, minmax(0,1fr))}
  .lg-contact li + li{border-top:0}
  .lg-contact li:nth-child(n+3){border-top:1px solid var(--line)}
  .lg-contact li:nth-child(even){border-left:1px solid var(--line)}
}

/* ---------- Footer ---------- */
.lg-footer{background:var(--navy-dark);color:rgba(250,249,246,.72);font-size:14.5px}
.lg-footer__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 40px;padding-block:44px 32px;border-bottom:1px solid var(--line-dark)}
.lg-footer .logo{color:var(--ivory)}
.lg-footer__tag{margin-top:12px;font-family:var(--serif);font-style:italic;font-size:26px;line-height:1.1;color:var(--gold)}
.lg-footer nav ul{display:flex;flex-wrap:wrap;gap:10px 24px}
.lg-footer a{transition:color .2s}
.lg-footer a:hover{color:var(--gold)}
.lg-footer a[aria-current="page"]{color:var(--ivory);font-weight:700}
.lg-footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-block:22px;font-size:13px}

@media print{
  .lg-header, .lg-toc, .lg-footer, .lg-skip{display:none!important}
  .lg-layout{display:block;padding:0}
  body.lg{background:#fff}
}