/* Shared site chrome: floating capsule navbar (+ mobile sheet) and coastal footer. Moved out of home.css verbatim so the
   home page and the reading pages (terms, privacy, security, cloudflare-whitelist) load one copy. No other rules. */
:root{--sky:#27238F;--cream:#F4EAD5;--amber:#F5B841;--pnav-h:68px}
/* ---------- navbar: over the hero, then a floating capsule ---------- */
.pnav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav,50);padding:0;transition:padding 260ms var(--ease-glide,ease)}
.pnav-in{display:flex;align-items:center;gap:var(--sp-4);min-height:var(--pnav-h);color:var(--cream);background:transparent;border:1px solid transparent;border-radius:0;transition:background-color 200ms linear,box-shadow 200ms linear,border-color 200ms linear,border-radius 200ms linear}
.pnav .brand{display:inline-flex;align-items:center;gap:10px;color:var(--cream);text-decoration:none;font-weight:700;font-size:var(--fs-lg);flex:none}
.pnav .brand img{display:block;height:28px;width:auto}
.pnav-links{display:flex;gap:var(--sp-1);list-style:none;margin:0 0 0 var(--sp-4);padding:0}
.pnav-links a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-3);color:var(--cream);text-decoration:none;font-weight:600;border-radius:var(--r-pill)}
.pnav-links a:hover{background:color-mix(in srgb,var(--cream) 12%,transparent)}
/* active section: small amber dot under the label (amber only ever sits on --sky) */
.pnav-links a[aria-current="true"]::after{content:"";position:absolute;left:50%;bottom:6px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--amber)}
.pnav-end{margin-left:auto;display:flex;align-items:center;gap:var(--sp-3)}
.pnav .lang{border-color:color-mix(in srgb,var(--cream) 55%,transparent)}
.pnav .lang button{color:var(--cream)}
.pnav .lang button[aria-pressed="true"]{background:var(--cream);color:var(--sky)}
.btn-inv{background:var(--cream);color:var(--sky)}
.btn-inv:hover{background:#FFFFFF;color:var(--sky)}
.pnav-toggle{display:none;background:transparent;border:1.5px solid color-mix(in srgb,var(--cream) 55%,transparent);color:var(--cream)}
.pnav :focus-visible,.pnav-sheet :focus-visible,.art-hero :focus-visible,.art-footer :focus-visible{outline:3px solid var(--cream);outline-offset:3px}
/* capsule state: past the hero */
.pnav.is-capsule{padding:10px var(--gutter)}
.pnav.is-capsule .pnav-in{max-width:1180px;margin:0 auto;padding:0 var(--sp-3) 0 var(--sp-5);background:var(--sky);border-color:color-mix(in srgb,var(--cream) 18%,transparent);border-radius:var(--r-pill);box-shadow:0 10px 30px -12px rgba(31,26,23,.45)}
@media (max-width:1023px){
  .pnav-links,.pnav-end .lang{display:none}
  .pnav-toggle{display:inline-flex}
  .pnav-in{gap:var(--sp-3)}
}
@media (max-width:399px){.pnav .brand span{font-size:var(--fs-base)}.pnav .nav-cta{padding-inline:14px}}

/* mobile: full-screen indigo sheet */
.pnav-sheet{position:fixed;inset:0;z-index:calc(var(--z-nav,50) + 1);background:var(--sky);color:var(--cream);display:flex;flex-direction:column;padding:var(--sp-4) var(--gutter) var(--sp-6);overflow-y:auto}
.pnav-sheet[hidden]{display:none}
.pnav-sheet .sheet-top{display:flex;align-items:center;justify-content:space-between;min-height:52px}
.pnav-sheet ul{list-style:none;margin:var(--sp-6) 0 0;padding:0;display:grid;gap:var(--sp-2)}
.pnav-sheet ul a{display:flex;align-items:center;min-height:52px;color:var(--cream);text-decoration:none;font-size:var(--fs-2xl);font-weight:700}
.pnav-sheet ul a[aria-current="true"]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber);margin-right:12px}
.pnav-sheet .sheet-foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);padding-top:var(--sp-6)}
.pnav-sheet .lang{border-color:color-mix(in srgb,var(--cream) 55%,transparent)}
.pnav-sheet .lang button{color:var(--cream)}
.pnav-sheet .lang button[aria-pressed="true"]{background:var(--cream);color:var(--sky)}
.sheet-x{background:transparent;color:var(--cream);border:1.5px solid color-mix(in srgb,var(--cream) 55%,transparent)}
body.sheet-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){.pnav,.pnav-in{transition:none}}

/* ---------- footer ---------- */
.art-footer{background:var(--sky);color:var(--cream);margin-top:var(--sp-9);padding-top:var(--sp-8)}
.af-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.4fr;gap:var(--sp-6);align-items:start}
.af-in,.af-copy{position:relative;z-index:1}
.af-brand img{display:block;height:36px;width:auto}
.af-brand p{margin:var(--sp-3) 0 0;font-size:var(--fs-base);line-height:1.6}
.af-h{margin:0 0 var(--sp-3);font-size:var(--fs-base);font-weight:700;color:var(--cream)}
.af-col ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.art-footer a{color:var(--cream);text-underline-offset:3px}
.af-col a,.af-brand a{text-decoration:none}
.af-col a:hover{text-decoration:underline}
.af-cta{border:1px solid color-mix(in srgb,var(--cream) 40%,transparent);border-radius:var(--r-lg);padding:var(--sp-5)}
.af-cta p{margin:0 0 var(--sp-3);font-size:var(--fs-base);line-height:1.6}
.af-line{background:transparent;color:var(--cream);border-color:var(--cream)}
.af-line:hover{background:var(--cream);color:var(--sky)}
.af-copy{margin:var(--sp-6) auto 0;font-size:var(--fs-sm);color:var(--cream)}
.af-art{display:block;margin-top:-14vw}
.af-art img{display:block;width:100%;height:auto;aspect-ratio:3/1}
@media (max-width:899px){.af-in{grid-template-columns:1fr 1fr}.af-brand,.af-cta{grid-column:1/-1}}
@media (max-width:599px){
  .af-in{grid-template-columns:1fr}
  .af-art{margin-top:-22vw}
  .af-art img{aspect-ratio:2/1;object-fit:cover;object-position:96% 100%}
}
/* the footer uses the wide container (home gets it from landing.css, the reading pages do not load that file) */
.art-footer .container{max-width:var(--container-wide);padding-inline:24px}