/* ============================================================================
   DOCUMENT PAGES — shared styling for the standalone resources that sit
   outside the React app (/staff-vetting.html, /privacy.html).

   Deliberately plain CSS: these have to survive being printed, emailed and
   forwarded, so they carry no build step and no framework. Same Dossier
   system as the site — Shield #1E2C36, Insignia #B08A4A, Dossier #F4F1EA,
   Blackout #0E1418 — and the same easing curve.
   ========================================================================= */

:root{
    --shield:#1E2C36; --insignia:#B08A4A; --dossier:#F4F1EA; --blackout:#0E1418;
    --ink:#1E2C36;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0; background:var(--dossier); color:var(--ink);
    font-family:"Inter Tight",system-ui,sans-serif; font-weight:300;
    -webkit-font-smoothing:antialiased; line-height:1.6;
  }
  .wrap{max-width:780px; margin:0 auto; padding:0 24px}
  a{color:inherit}

  /* ---------- masthead ---------- */
  header{background:var(--blackout); color:var(--dossier); padding:48px 0 56px}
  header .wrap{display:block}
  .mark{height:44px;width:auto;display:block}
  .eyebrow{
    font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px;
    text-transform:uppercase; letter-spacing:.22em; color:var(--insignia);
  }
  .rule-sm{display:inline-block;width:32px;height:1px;background:var(--insignia);opacity:.6;
    vertical-align:middle;margin-right:12px}
  h1{
    font-size:clamp(2rem,5.5vw,3.2rem); font-weight:600; letter-spacing:-.045em;
    line-height:1.02; margin:28px 0 0;
  }
  h1 em{
    font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; font-weight:300;
    color:var(--insignia); letter-spacing:-.02em;
  }
  .standfirst{max-width:44ch; margin:22px 0 0; font-size:15.5px; color:rgba(244,241,234,.6)}
  .byline{
    margin-top:32px; padding-top:20px; border-top:1px solid rgba(244,241,234,.12);
    font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px;
    text-transform:uppercase; letter-spacing:.16em; color:rgba(244,241,234,.4);
  }

  /* ---------- body ---------- */
  main{padding:64px 0 0}
  section{margin:0 0 56px}
  h2{
    font-size:clamp(1.3rem,2.6vw,1.7rem); font-weight:600; letter-spacing:-.035em;
    line-height:1.2; margin:0 0 4px;
  }
  .num{
    font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; font-weight:300;
    font-size:34px; line-height:1; color:var(--insignia); display:block; margin-bottom:10px;
  }
  p{margin:16px 0; font-size:15.5px; max-width:62ch}
  .lede{font-size:17px}
  strong{font-weight:500}
  em.q{
    font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; font-weight:300;
    font-size:clamp(1.25rem,2.6vw,1.7rem); line-height:1.3; display:block;
    margin:28px 0; padding-left:22px; border-left:1px solid rgba(176,138,74,.55);
    max-width:48ch;
  }

  ul.plain{list-style:none; padding:0; margin:18px 0; max-width:62ch}
  ul.plain li{position:relative; padding-left:26px; margin:11px 0; font-size:15px}
  ul.plain li::before{
    content:""; position:absolute; left:0; top:11px; width:14px; height:1px;
    background:var(--insignia); opacity:.75;
  }

  /* ---------- the working checklist ---------- */
  .check{border-top:1px solid rgba(30,44,54,.14); margin:22px 0 0; max-width:62ch}
  .check li{
    list-style:none; display:flex; gap:14px; align-items:flex-start;
    padding:13px 0; border-bottom:1px solid rgba(30,44,54,.1); font-size:14.5px;
  }
  .check li::before{
    content:""; flex:0 0 auto; width:13px; height:13px; margin-top:4px;
    border:1px solid rgba(30,44,54,.35); border-radius:2px;
  }
  .check{padding:0}
  .grp{
    font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px;
    text-transform:uppercase; letter-spacing:.18em; color:rgba(30,44,54,.4);
    margin:34px 0 0;
  }

  /* One curve governs every transition on this page, same as the site. */
  :root{--hev:cubic-bezier(.32,.72,0,1)}

  /* Film grain — fixed and inert, never attached to a scrolling container. */
  body::after{
    content:""; position:fixed; inset:0; z-index:50; pointer-events:none; opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* Double bezel — the core seated in its tray. Inner radius is the outer
     minus the shell padding, so the curves stay concentric. */
  .callout{
    border-radius:36px; padding:6px; margin:48px 0;
    background:rgba(30,44,54,.04); border:1px solid rgba(30,44,54,.07);
  }
  .callout > div{
    background:var(--shield); color:var(--dossier); border-radius:30px;
    padding:34px 32px; box-shadow:inset 0 1px 1px rgba(244,241,234,.09);
  }
  .callout h3{margin:12px 0 0; font-size:20px; font-weight:500; letter-spacing:-.02em}
  .callout p{color:rgba(244,241,234,.62); max-width:56ch}

  /* The checklist is a machined plate, not a list on the page. */
  .plate{
    border-radius:36px; padding:6px; margin:26px 0 0;
    background:rgba(30,44,54,.035); border:1px solid rgba(30,44,54,.07);
  }
  .plate > div{
    background:rgba(255,255,255,.6); border-radius:30px; padding:26px 30px;
    box-shadow:inset 0 1px 1px rgba(255,255,255,.9);
  }
  .plate .grp:first-child{margin-top:0}

  /* Entry motion — IntersectionObserver, never a scroll listener. */
  .rise{opacity:0; transform:translateY(28px); filter:blur(8px);
    transition:opacity .9s var(--hev), transform .9s var(--hev), filter .9s var(--hev)}
  .rise.in{opacity:1; transform:none; filter:none}
  @media (prefers-reduced-motion:reduce){
    .rise{opacity:1; transform:none; filter:none; transition:none}
  }

  /* ---------- close ---------- */
  footer{background:var(--blackout); color:var(--dossier); margin-top:72px; padding:56px 0}
  footer .sig{
    font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; font-weight:300;
    font-size:21px; color:rgba(244,241,234,.85); max-width:40ch; margin:0 0 26px;
  }
  .cta{
    display:inline-flex; align-items:center; gap:14px;
    background:var(--insignia); color:var(--blackout);
    text-decoration:none; border-radius:999px; padding:13px 13px 13px 28px;
    font-size:14px; font-weight:500; letter-spacing:-.01em;
    transition:transform .5s var(--hev);
  }
  .cta:hover{transform:scale(1.015)}
  .cta:active{transform:scale(.985)}
  /* The arrow is never naked beside the label — it sits in its own island,
     flush with the pill's inner padding, and carries the hover tension. */
  .cta .ico{
    width:34px; height:34px; border-radius:999px; background:rgba(14,20,24,.1);
    display:grid; place-items:center; flex:0 0 auto;
    transition:transform .5s var(--hev);
  }
  .cta:hover .ico{transform:translate(3px,-1px) scale(1.05)}
  .cta .ico svg{width:14px; height:14px; stroke:currentColor; stroke-width:1.35;
    fill:none; stroke-linecap:round; stroke-linejoin:round}
  .contact{margin-top:26px; font-size:14px; color:rgba(244,241,234,.6)}
  .contact a{text-decoration:none}
  .contact a:hover{color:var(--insignia)}
  .fineprint{
    margin-top:34px; padding-top:20px; border-top:1px solid rgba(244,241,234,.1);
    font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px;
    text-transform:uppercase; letter-spacing:.16em; color:rgba(244,241,234,.25);
  }

  /* ---------- print: this is meant to be carried into a room ---------- */
  @media print{
    body{background:#fff}
    header,footer,.callout,.callout>div,.plate,.plate>div{
      background:#fff!important; color:#000!important; box-shadow:none!important;
      border-color:#999!important; padding-left:0; padding-right:0}
    .rise{opacity:1!important; transform:none!important; filter:none!important}
    body::after{display:none}
    header{border-bottom:1px solid #000; margin-bottom:28px}
    .standfirst,.byline,.callout p,footer .sig,.contact,.fineprint{color:#333!important}
    h1 em,.num,.eyebrow{color:#000!important}
    .cta{border:1px solid #000; background:#fff!important; color:#000!important}
    section{page-break-inside:avoid}
    .check li{break-inside:avoid}
    a[href^="http"]::after{content:" (" attr(href) ")"; font-size:9px; color:#666}
  }