/* Secondary pages (methodology, contact, privacy, terms). Mirrors the home page's palette and type. */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#F7F6F1;color:#0C2340;font-family:'Public Sans',system-ui,sans-serif}
a{color:#0C2340}
a:hover{opacity:.85}
.wrap{max-width:1240px;margin:0 auto;padding-left:clamp(20px,5vw,48px);padding-right:clamp(20px,5vw,48px)}
.nav-band{position:relative;border-bottom:1px solid rgba(12,35,64,.25)}
.nav-band::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:#0C2340}
/* The four focus-area hues (Frontier AI, Quantum / PQC, Readiness Signal, Risk Quantification) along the footer's top edge. */
#contact::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#E4762C 0 25%,#8A66D9 25% 50%,#37BB62 50% 75%,#19A4B7 75%)}
.nav{display:flex;flex-wrap:wrap;row-gap:12px;justify-content:space-between;align-items:center;padding-top:16px;padding-bottom:16px}
.brand{display:flex;align-items:flex-end;gap:12px;text-decoration:none;color:#0C2340}
.brand:hover{opacity:1}
/* The logo: the mark (a frame around two bars, a square past its open corner), the wordmark in Saira
   and the tagline in Lexend, both fonts loaded with only the letters the logo uses. */
.brand-logo{flex:none;display:block;width:40px;height:auto}
.brand-text{display:flex;flex-direction:column;gap:5px}
.brand-name{font-family:'Saira',sans-serif;font-size:19px;font-weight:500;letter-spacing:.2em;line-height:1;text-transform:uppercase}
.brand-tag{font-family:'Lexend',sans-serif;font-size:11.5px;line-height:1.15;color:rgba(12,35,64,.78)}
@media (max-width:420px){.brand-logo{width:34px}.brand-name{font-size:16px;letter-spacing:.16em}.brand-tag{font-size:10.5px}}
.nav-links{display:flex;flex-wrap:wrap;gap:16px 32px;font-size:15px;font-weight:500;align-items:center}
.nav-links a{text-decoration:none;color:rgba(12,35,64,.85)}
.nav-links a:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px;opacity:1}
.page{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,48px);padding-top:clamp(44px,7vw,72px);padding-bottom:clamp(44px,7vw,72px)}
.page-label{flex:0 0 172px;font-size:11.5px;letter-spacing:.16em;font-weight:600;color:rgba(12,35,64,.6)}
.prose{flex:1 1 400px;min-width:0;max-width:680px}
.prose h1{margin:0 0 22px;font-family:'Source Serif 4',serif;font-size:clamp(30px,4vw,40px);line-height:1.15;font-weight:500;letter-spacing:-.01em;text-wrap:pretty}
.prose h2{margin:36px 0 10px;font-family:'Source Serif 4',serif;font-size:22px;font-weight:600;line-height:1.3}
.prose p,.prose li{font-size:15.5px;line-height:1.7;color:rgba(12,35,64,.8)}
.prose p{margin:0 0 16px}
.prose ul{padding-left:20px;margin:0 0 16px}
.prose .lede{font-family:'Source Serif 4',serif;font-size:22px;line-height:1.5;color:#0C2340;margin-bottom:24px;text-wrap:pretty}
.prose .meta{font-size:11.5px;font-weight:600;letter-spacing:.12em;color:rgba(12,35,64,.55);margin-top:32px}
.prose a{text-decoration:underline;text-underline-offset:4px}
/* File paths keep a code face, from the reader's system rather than a web font. */
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px}
#contact{position:relative;background-color:#0C2340;background-image:radial-gradient(rgba(247,246,241,.075) 1px,rgba(247,246,241,0) 1.6px);background-size:22px 22px;color:rgba(247,246,241,.88)}
.footer{display:flex;flex-direction:column;gap:28px;padding-top:clamp(32px,5vw,44px);padding-bottom:32px}
.footer-links{display:flex;flex-wrap:wrap;gap:16px 28px;font-size:12.5px;font-weight:600;letter-spacing:.1em}
.footer-links a{color:#F7F6F1;text-decoration:none;border-bottom:1px solid rgba(247,246,241,.5);padding-bottom:3px;transition:border-color .25s ease}
.footer-links a:hover{border-bottom-color:#65E287;opacity:1}
.footer-bottom{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;border-top:1px solid rgba(247,246,241,.2);padding-top:20px}
.footer-domain{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:600;letter-spacing:.14em;color:rgba(247,246,241,.6)}
.footer-logo{flex:none;width:20px;height:auto;color:rgba(247,246,241,.75)}
.footer-copy{font-size:13px;color:rgba(247,246,241,.6)}
@media (pointer:coarse){.nav-links a,.footer-links a{padding:12px 8px;margin:-12px -8px}}