/* Shared styles for the secondary pages. Main page styles live in site.css. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('/fonts/fraunces-latin-wght.woff2') format('woff2-variations'); }
@font-face { font-family: 'Bricolage'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('/fonts/bricolage-latin-wght.woff2') format('woff2-variations'); }
:root { --cream:#F6EDDF; --sand:#EEDFC8; --line:#DBC9AE; --green:#1C523B; --green-d:#143D2C; --navy:#011E48;
        --clay:#A94E2E; --clay-d:#8F3D1F; --amber:#E2A03C; --ink:#2B2019; --muted:#6F6053; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Bricolage', ui-sans-serif, system-ui, sans-serif; line-height:1.6; min-height:100vh;
       display:flex; flex-direction:column; -webkit-font-smoothing:antialiased; }
body.green { background:var(--green); color:var(--cream); }
body.paper { background:var(--cream); color:var(--ink); }
a { color:inherit; }
.wrap { max-width:720px; margin:0 auto; padding:0 24px; width:100%; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip { position:absolute; left:12px; top:-60px; z-index:10; background:var(--green-d); color:var(--cream);
        padding:12px 20px; border-radius:0 0 10px 10px; text-decoration:none; font-weight:600; }
.skip:focus { top:0; }

.top { padding:22px 0; }
.top .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.mark { display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.mark img { width:44px; height:44px; border-radius:10px; display:block; }
.mark span { font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:1.02rem; }
.paper .mark span { color:var(--navy); }
.back { font-size:.92rem; text-underline-offset:3px; }
.paper .top { border-bottom:1px solid var(--line); background:#FBF6EC; }

main { flex:1; padding:48px 0 72px; }
.green main { display:flex; align-items:center; }
h1 { font-family:'Fraunces', Georgia, serif; font-weight:600; letter-spacing:-0.015em;
     font-size:clamp(2rem,5vw,2.9rem); line-height:1.1; margin-bottom:18px; text-wrap:balance; }
.green h1 em { font-style:normal; color:var(--amber); }
.paper h1 { color:var(--navy); }
h2 { font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:1.35rem; color:var(--navy); margin:34px 0 10px; }
p { margin-bottom:14px; max-width:62ch; font-size:1.03rem; }
.green p { color:rgba(246,237,223,.9); }
.lede { font-size:1.12rem; }
.paper .updated { color:var(--muted); font-size:.92rem; }
ul.list { margin:4px 0 16px 22px; max-width:60ch; }
ul.list li { margin-bottom:8px; }
.green ul.list { color:rgba(246,237,223,.9); }
.paper main a { color:var(--green); text-underline-offset:3px; }
.btn { display:inline-block; margin-top:14px; text-decoration:none; font-weight:600;
       background:var(--clay); color:var(--cream); padding:14px 28px; border-radius:999px; min-height:48px; }
.btn:hover { background:var(--clay-d); }
.paper .btn { color:var(--cream); }
table { border-collapse:collapse; margin:6px 0 18px; width:100%; max-width:62ch; font-size:.97rem; }
th, td { text-align:left; vertical-align:top; padding:10px 12px 10px 0; border-bottom:1px solid var(--line); }
th { font-weight:600; color:var(--navy); width:34%; }
.table-wrap { overflow-x:auto; }

footer { background:var(--green-d); color:rgba(246,237,223,.78); padding:30px 0 34px; font-size:.9rem; }
.foot-links { list-style:none; display:flex; flex-wrap:wrap; gap:8px 22px; margin-bottom:12px; }
.foot-links a { color:rgba(246,237,223,.9); text-underline-offset:3px; }
.copy { color:rgba(246,237,223,.78); font-size:.9rem; margin-bottom:22px; }
.credit { padding-top:20px; border-top:1px solid rgba(246,237,223,.16); display:flex; justify-content:center; }
.built-by { display:inline-flex; flex-direction:column; align-items:center; gap:9px; text-decoration:none;
            color:rgba(246,237,223,.78); font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; }
.built-by img { width:132px; height:auto; display:block; border-radius:7px; }
.built-by:hover { color:var(--cream); }
:focus-visible { outline:3px solid var(--amber); outline-offset:3px; border-radius:4px; }
.paper main :focus-visible { outline-color:var(--green); }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }