/*
 * Privacy Policy and Terms of Service (body.portfolio-page.legal-page).
 * Load order in <head>: /assets/il/site-footer.css, this file, /assets/il/site-navbar.css.
 * The pages have no inline <style>; all legal typography lives here.
 */
@font-face {
  font-family: "PP Monument Extended Black";
  src: url("/fonts/PPMonumentExtended-Black.woff2") format("woff2"),
       url("/fonts/PPMonumentExtended-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* Stand-ins while the heading font loads: Arial Black, else Arial Bold or a metric-compatible clone (Arimo on
   ChromeOS, Liberation Sans on Linux), else Roboto (Android), each scaled to Monument's letter widths and line
   metrics, so headings wrap into the same lines and nothing below them moves when Monument swaps in. */
@font-face {
  font-family: "PP Monument Fallback Black";
  src: local("Arial Black"), local("Arial-Black");
  font-weight: 900;
  size-adjust: 130%;
  ascent-override: 80%;
  descent-override: 24.6%;
  line-gap-override: 7.7%;
}
@font-face {
  font-family: "PP Monument Fallback Bold";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arimo Bold"), local("Arimo-Bold"),
       local("Liberation Sans Bold"), local("LiberationSans-Bold");
  font-weight: 900;
  size-adjust: 144%;
  ascent-override: 72.223%;
  descent-override: 22.223%;
  line-gap-override: 6.945%;
}
/* Roboto (Android). 11 and older ship a static Roboto Black; 12 and newer only the variable Roboto, which
   local() finds by its default name and Chrome draws as synthetic bold. Each is scaled to its own widths. */
@font-face {
  font-family: "PP Monument Fallback Roboto Black";
  src: local("Roboto Black"), local("Roboto-Black");
  font-weight: 900;
  size-adjust: 155%;
  ascent-override: 67.097%;
  descent-override: 20.646%;
  line-gap-override: 6.452%;
}
@font-face {
  font-family: "PP Monument Fallback Roboto";
  src: local("Roboto"), local("Roboto-Regular");
  font-weight: 900;
  size-adjust: 158%;
  ascent-override: 65.823%;
  descent-override: 20.254%;
  line-gap-override: 6.33%;
}

body.portfolio-page {
  --brand-blue: #3f75f5;
  /* Brand blue for text under 18.66px bold / 24px: #3f75f5 is 4.1:1 on white, this is 6.2:1 (same value as
     site-navbar.css). */
  --brand-blue-text: #2857d0;
  --neutral-950: #0a0a0a;
  --neutral-800: #1f2937;
  --neutral-600: #4b5563;
  --neutral-700: #374151;
  --neutral-500: #6b7280;
  --neutral-400: #9ca3af;
  --neutral-200: #e5e7eb;
  --neutral-100: #f3f4f6;
  --neutral-50: #f9fafb;
  --white: #ffffff;
  --font-heading: "PP Monument Extended Black", "PP Monument Fallback Black", "PP Monument Fallback Bold", "PP Monument Fallback Roboto Black", "PP Monument Fallback Roboto", var(--font-body), system-ui, sans-serif;
  --font-body: 'Roboto', sans-serif;
  --radius-full: 999px;
  --radius-xl: 24px;
  --radius-md: 8px;
}

/* box-sizing everywhere; margin/padding reset only under section/footer, never on .navbar
   (it would beat the single-class .nav-tab rules in site-navbar.css). */
body.portfolio-page,
body.portfolio-page *,
body.portfolio-page *::before,
body.portfolio-page *::after {
  box-sizing: border-box;
}

body.portfolio-page section,
body.portfolio-page section *,
body.portfolio-page section *::before,
body.portfolio-page section *::after,
body.portfolio-page footer,
body.portfolio-page footer *,
body.portfolio-page footer *::before,
body.portfolio-page footer *::after {
  margin: 0;
  padding: 0;
}

/* The reset above zeroes footer padding; re-apply the shared footer spacing. */
body.portfolio-page .site-footer {
  padding: 80px 0 0;
}
body.portfolio-page .site-footer .footer-top {
  padding-bottom: 60px;
}
body.portfolio-page .site-footer .footer-bottom {
  padding: 24px 0;
}

body.portfolio-page {
  margin: 0;
  font-family: var(--font-body);
  background: var(--white);
  color: var(--neutral-950);
  -webkit-font-smoothing: antialiased;
  padding-top: 78px;
}

body.portfolio-page a { text-decoration: none; }
body.portfolio-page img { max-width: 100%; height: auto; }

body.portfolio-page.legal-page section.legal-section {
  padding-top: 120px;
  padding-bottom: 120px;
  background: var(--white);
}

/* Content and footer containers only; nav > .container is styled by site-navbar.css. */
body.portfolio-page section .container,
body.portfolio-page footer .container {
  /* body has margin: 0 here (the browser's 8px made /portfolio scroll sideways at 320px); the 8px is added to
     these paddings (and 2 x 8px to the max-width) so content keeps its former distance from the screen edge. */
  max-width: 1216px;
  margin: 0 auto;
  padding: 0 56px;
}

/* ---- Legal text. Selectors start with body.portfolio-page.legal-page so they beat the section reset. ---- */

/* One readable column (about 72 characters a line), centred in the page container. 40.5em is 72ch of Roboto;
   unlike ch it does not change when Roboto replaces the fallback font, so the column does not shift on load. */
body.portfolio-page.legal-page .legal-content {
  max-width: 40.5em;
  margin: 0 auto;
  font-size: 16px;
}

body.portfolio-page.legal-page .legal-content :is(h1, h2, h3, h4) {
  margin: 0;
  color: var(--neutral-950);
  font-weight: 700;
  /* Headings use the wide display face; never let a long word push the page sideways on phones. */
  overflow-wrap: break-word;
  /* A little room above a heading that is the target of a #link (e.g. /privacy#cookies); html's
     scroll-padding-top (site-navbar.css) already clears the fixed navbar. */
  scroll-margin-top: 16px;
}

body.portfolio-page.legal-page .legal-content h1 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.4px;
  margin: 10px 0 20px;
}

body.portfolio-page.legal-page .legal-content h2 {
  color: var(--brand-blue);
  font-size: 24px;
  line-height: 1.3;
  margin: 40px 0 14px;
}

body.portfolio-page.legal-page .legal-content h3 {
  color: var(--brand-blue-text);
  font-size: 19px;
  line-height: 1.35;
  margin: 28px 0 10px;
}

body.portfolio-page.legal-page .legal-content h4 {
  font-size: 16px;
  line-height: 1.4;
  margin: 22px 0 8px;
}

body.portfolio-page.legal-page .legal-content :is(p, li) {
  color: var(--neutral-600);
  font-size: 16px;
  line-height: 1.68;
}

body.portfolio-page.legal-page .legal-content p {
  margin: 0 0 1em;
}

body.portfolio-page.legal-page .legal-content ul {
  margin: 0 0 1em;
  padding-left: 1.4em;
  list-style: disc outside;
}

body.portfolio-page.legal-page .legal-content li + li {
  margin-top: 6px;
}

body.portfolio-page.legal-page .legal-content strong {
  color: var(--neutral-800);
  font-weight: 600;
}

body.portfolio-page.legal-page .legal-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  color: var(--neutral-800);
  background: var(--neutral-100);
  padding: 1px 5px;
  border-radius: 4px;
  overflow-wrap: anywhere;
}

/* Links in running text: underlined, not colour alone (WCAG 1.4.1). */
body.portfolio-page.legal-page .legal-content a {
  color: var(--brand-blue-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
body.portfolio-page.legal-page .legal-content a:hover {
  text-decoration-thickness: 2px;
}
body.portfolio-page.legal-page .legal-content a:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

body.portfolio-page.legal-page .legal-content .last-updated {
  color: var(--neutral-500);
  font-weight: 600;
}

/* "Change cookie settings": consent.js un-hides it only where the consent banner applies. */
body.portfolio-page.legal-page .legal-content .legal-consent-btn:not([hidden]) {
  display: inline-flex;
}
body.portfolio-page.legal-page .legal-content .legal-consent-btn {
  align-items: center;
  min-height: 40px;
  margin: 4px 0 1em;
  padding: 0 18px;
  border: 1px solid var(--neutral-950);
  border-radius: var(--radius-full);
  background: var(--white);
  color: var(--neutral-950);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
body.portfolio-page.legal-page .legal-content .legal-consent-btn:hover {
  background: var(--neutral-950);
  color: var(--white);
}
body.portfolio-page.legal-page .legal-content .legal-consent-btn:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  body.portfolio-page.legal-page .legal-content .legal-consent-btn { transition: none; }
}

@media (max-width: 1024px) {
  body.portfolio-page section .container,
  body.portfolio-page footer .container { padding: 0 36px; }
}
@media (max-width: 768px) {
  body.portfolio-page section .container,
  body.portfolio-page footer .container { padding: 0 26px; }
  body.portfolio-page { padding-top: 64px; }
  body.portfolio-page.legal-page .legal-content h1 { font-size: 24px; }
  body.portfolio-page.legal-page .legal-content h2 { font-size: 20px; }
  body.portfolio-page.legal-page .legal-content h3 { font-size: 17px; }
  body.portfolio-page.legal-page .legal-content :is(p, li) { font-size: 15px; }
}
@media (max-width: 480px) {
  body.portfolio-page section .container,
  body.portfolio-page footer .container { padding: 0 22px; }
}