/* ==========================================================================
   FactFlow — base: tokens, reset, nav, footer. Shared by every page.

   MOBILE-FIRST. Base rules target the smallest supported viewport (320px).
   Every media query is min-width and layers enhancements upward:

     base    320-374   phone, single column
     --sm    375       larger phone
     --md    425       large phone / phablet
     --lg    768       tablet, columns begin pairing
     --xl    1024      laptop, full multi-column layouts
     --2xl   1440      large desktop, container caps out
   ========================================================================== */

:root{
  /* palette */
  --ink:#12161C; --ink-2:#1E242D;
  --paper:#F4F3EF; --paper-2:#FFFFFF;
  --rule:#D8D5CC; --muted:#6E7178;
  --true:#1E5631; --false:#B4232A; --misl:#96650B; --unv:#5A5E66;

  /* type */
  --serif:'Newsreader',Georgia,serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  /* layout */
  --container:1120px;
  --gutter:18px;
  --measure:40em;

  /* spacing scale — one source of truth, scales with the breakpoint */
  --sp-1:6px; --sp-2:10px; --sp-3:16px; --sp-4:22px;
  --sp-5:30px; --sp-6:44px; --sp-7:64px;

  /* minimum comfortable tap target */
  --tap:44px;
}

@media(min-width:375px){ :root{ --gutter:20px } }
@media(min-width:425px){ :root{ --gutter:22px } }
@media(min-width:768px){ :root{ --gutter:26px; --sp-6:52px; --sp-7:72px } }
@media(min-width:1024px){ :root{ --gutter:28px; --sp-7:80px } }

*{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  /* anchor targets clear the sticky nav instead of hiding behind it */
  scroll-padding-top:72px;
}

body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* belt and braces: nothing may establish a wider scroll area than the screen */
  max-width:100%;
}
@media(min-width:768px){ body{font-size:17px} }

img,svg,video,canvas{max-width:100%;height:auto}
/* media and embeds scale inside whatever container holds them */
img,video{object-fit:cover}

:focus-visible{outline:2px solid var(--false);outline-offset:2px}

/* skip link — first tab stop, hidden until focused */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--paper);
  padding:12px 18px;font-family:var(--mono);font-size:12px;text-decoration:none;
}
.skip:focus{left:0}

.wrap{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ==========================================================================
   navigation
   ========================================================================== */

nav{
  position:sticky;top:0;z-index:50;
  background:rgba(244,243,239,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.nav-in{
  width:100%;max-width:var(--container);
  margin-inline:auto;
  padding:12px var(--gutter);
  display:flex;align-items:center;gap:var(--sp-2);
}
@media(min-width:768px){ .nav-in{padding-block:14px;gap:var(--sp-4)} }

.logo{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(17px,4.4vw,20px);
  letter-spacing:-.01em;text-decoration:none;color:var(--ink);white-space:nowrap;
}
.logo sup{font-size:9px;vertical-align:super;font-family:var(--mono);font-weight:400}

/* hamburger — phone and tablet only */
.nav-toggle{
  margin-left:auto;
  width:var(--tap);height:var(--tap);
  display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--rule);border-radius:2px;
  color:var(--ink);cursor:pointer;flex:none;
}
.nav-toggle span{
  position:relative;display:block;width:17px;height:1.5px;background:currentColor;
}
.nav-toggle span::before,.nav-toggle span::after{
  content:'';position:absolute;left:0;width:17px;height:1.5px;background:currentColor;
  transition:transform .2s ease,opacity .2s ease;
}
.nav-toggle span::before{top:-5.5px}
.nav-toggle span::after{top:5.5px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(5.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-5.5px) rotate(-45deg)}

/* links: collapsed drawer on small screens */
.nav-links{
  display:none;
  position:absolute;left:0;right:0;top:100%;
  flex-direction:column;align-items:stretch;gap:0;
  background:var(--paper-2);
  border-bottom:1px solid var(--rule);
  padding:var(--sp-2) var(--gutter) var(--sp-3);
  box-shadow:0 18px 30px -24px rgba(18,22,28,.5);
}
.nav-links.open{display:flex}
.nav-links a{
  font-family:var(--mono);font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
  display:flex;align-items:center;
  min-height:var(--tap);
  border-bottom:1px solid var(--rule);
}
.nav-links a:last-child{border-bottom:0}
.nav-links a:hover{color:var(--ink)}
.nav-cta{
  background:var(--ink);color:var(--paper);
  border-radius:2px;justify-content:center;
  margin-top:var(--sp-2);border-bottom:0!important;
}
.nav-cta:hover{color:var(--paper)}

/* single-link nav (legal pages): never collapses, no toggle needed */
.nav-links.nav-simple{
  display:flex;position:static;flex-direction:row;align-items:center;
  margin-left:auto;background:none;border:0;padding:0;box-shadow:none;
}
.nav-links.nav-simple a{min-height:0;border-bottom:0;padding:10px 15px}

/* 768px+: horizontal bar, no toggle */
@media(min-width:768px){
  .nav-toggle{display:none}
  .nav-links{
    display:flex!important;
    position:static;flex-direction:row;align-items:center;
    margin-left:auto;gap:clamp(12px,2vw,22px);
    background:none;border:0;padding:0;box-shadow:none;
  }
  .nav-links a{
    font-size:11px;min-height:0;border-bottom:0;
    padding-block:5px;
  }
  .nav-cta{margin-top:0;padding:9px 15px}
}
@media(min-width:1024px){
  .nav-links{gap:22px}
}

/* ==========================================================================
   footer
   ========================================================================== */

footer{
  border-top:1px solid var(--rule);
  padding-block:var(--sp-6) var(--sp-6);
  background:var(--paper-2);
}
@media(min-width:768px){ footer{padding-block:44px 56px} }

.foot-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-4);
}
@media(min-width:425px){ .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5)} }
@media(min-width:1024px){ .foot-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px} }

.foot-h{
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);font-weight:600;margin-bottom:var(--sp-2);
}
.foot-grid p{font-size:14px;color:var(--muted);line-height:1.7;overflow-wrap:anywhere}
/* inline-block + padding keeps stacked links at a >=24px tap target (WCAG 2.5.8) */
.foot-grid a{
  color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule);
  display:inline-block;padding:3px 0;
}
.foot-grid a:hover{color:var(--ink)}

.foot-base{
  display:flex;flex-wrap:wrap;gap:var(--sp-2);
  margin-top:var(--sp-5);padding-top:var(--sp-4);
  border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.04em;
  line-height:1.6;
}
@media(min-width:768px){ .foot-base{gap:26px;margin-top:34px;padding-top:20px} }

/* ==========================================================================
   responsive tables — shared utility
   ========================================================================== */

.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
}
.table-scroll table{border-collapse:collapse;width:100%;min-width:520px}
.table-scroll th,.table-scroll td{
  padding:12px 14px;text-align:left;font-size:14px;
  border-bottom:1px solid var(--rule);
}
.table-scroll th{
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}

/* ==========================================================================
   device and preference adaptations
   ========================================================================== */

/* coarse pointers get full-size targets */
@media(hover:none){
  .foot-grid a{padding:5px 0}
  .nav-cta{padding:12px 16px}
}

@media print{
  nav,.skip{display:none}
  body{background:#fff;font-size:12pt}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}