/* Shared layout for How I use AI, Privacy, Terms and Accessibility */
:root{ --ink:#0A0A0A; --ink-2:#2B2A28; --grey:#6B6862; --rule:#E2DED7; --paper:#EFEBE4; --red:#FF0000 }
*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{ margin:0; background:#fff; color:var(--ink); font:400 18px/1.6 'Roboto Condensed','Arial Narrow',sans-serif }
a{ color:var(--ink) } a:focus-visible, button:focus-visible{ outline:2px solid var(--red); outline-offset:3px }
.skip{ position:absolute; left:-9999px } .skip:focus{ left:16px; top:12px; background:#fff; padding:8px 12px; z-index:9 }
.top{ display:flex; justify-content:space-between; align-items:center; padding:16px clamp(20px,4vw,48px); border-bottom:1px solid var(--rule) }
.top img{ height:44px; display:block }
.top nav{ display:flex; gap:22px; font:400 11px/1.4 'Archivo Black',sans-serif; letter-spacing:.14em; text-transform:uppercase }
.top nav a{ text-decoration:none } .top nav a[aria-current]{ text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:5px; text-decoration-thickness:2px }
.hero{ background:linear-gradient(rgba(242,239,233,.72),rgba(242,239,233,.72)), url(assets/hifb_paper.jpg) center/cover; padding:clamp(48px,7vw,96px) clamp(20px,4vw,48px) clamp(40px,5vw,64px) }
.hero .wrap, main .wrap{ max-width:820px; margin:0 auto }
.label{ font:400 11px/1.4 'Archivo Black',sans-serif; letter-spacing:.16em; text-transform:uppercase; margin:0 0 14px }
h1{ font:400 clamp(44px,6.4vw,84px)/.95 'Anton',Impact,sans-serif; text-transform:uppercase; margin:0 }
h1 em{ font-style:normal; color:var(--red) }
.lede{ font-size:21px; line-height:1.5; max-width:46ch; margin:22px 0 0; color:var(--ink-2) }
.updated{ font-size:14px; color:var(--grey); margin-top:18px }
main{ padding:clamp(36px,5vw,64px) clamp(20px,4vw,48px) 96px }
h2{ font:400 clamp(28px,3vw,38px)/1.05 'Anton',Impact,sans-serif; text-transform:uppercase; margin:56px 0 14px }
h3{ font:700 20px/1.3 'Roboto Condensed',sans-serif; margin:28px 0 6px }
p, li{ color:var(--ink-2) }
ul{ padding-left:1.1em } li{ margin:6px 0 }
.toc{ border-top:1.5px solid var(--ink); border-bottom:1px solid var(--rule); padding:14px 0; margin:0 0 8px; display:flex; flex-wrap:wrap; gap:8px 22px; font-size:15px }
.toc a{ text-decoration:none } .toc a:hover{ text-decoration:underline }
.pillars{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1.5px solid var(--ink); margin:28px 0 0 }
.pillars div{ padding:20px 22px 22px 0; border-bottom:1px solid var(--rule) }
.pillars b{ display:block; font:400 26px/1 'Anton',Impact,sans-serif; text-transform:uppercase; margin-bottom:8px }
.pillars b span{ color:var(--grey); margin-right:10px }
.pillars p{ margin:0; font-size:17px }
table{ width:100%; border-collapse:collapse; font-size:16px; margin:12px 0 }
th, td{ text-align:left; vertical-align:top; padding:10px 12px 10px 0; border-bottom:1px solid var(--rule) }
th{ font:400 11px/1.4 'Archivo Black',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--grey) }
.note{ background:var(--paper); padding:18px 20px; margin:20px 0; font-size:16px }
.caps{ text-transform:uppercase; font-size:15px }
footer{ border-top:1px solid var(--rule); padding:22px clamp(20px,4vw,48px); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:14px; color:var(--grey) }
footer nav{ display:flex; gap:18px; flex-wrap:wrap } footer a{ color:var(--grey) }
@media (max-width:700px){ .top nav{ display:none } .pillars{ grid-template-columns:1fr } body{ font-size:17px } }