/* Shared page chrome: design tokens, base styles, header and footer.

   Values follow the PCE Web design spec: 1440 frame, 1176 content, 132 gutters,
   80 masthead, 68 footer. Load this on any page that uses the PCE Header or
   PCE Footer components, before the page's own stylesheet.

   The palette is duplicated from pce-landing.css rather than shared with it.
   That page predates these components and carries its own copy, so touching
   this file cannot affect it.

   Every class is prefixed tr- so nothing collides with the landing page. */

:root{
  --ink:#0B1B2E; --ink-2:#12283F; --ink-soft:#3B4C5E;
  --registry:#094DB0; --registry-d:#00369A;
  --seal:#126C28; --seal-d:#0D5320;
  --paper:#F2F6F8; --paper-2:#E4EBF0;
  --white:#fff; --rule:#CBD8E1; --rule-soft:#E1E9EE;
  --alert:#B3261E;
  --f-display:"Newsreader",Georgia,serif;
  --f-sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  /* 1440 frame minus 1176 content leaves 132 each side */
  --tr-page:1440px; --tr-gut:132px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{font-family:var(--f-sans);color:var(--ink);background:var(--paper);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--registry);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--registry);outline-offset:2px}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
/* Author display rules such as .tr-btn{display:flex} would otherwise beat
   the browser default for [hidden], leaving hidden panels visible. */
[hidden]{display:none!important}

.tr-wrap{max-width:var(--tr-page);margin:0 auto;padding:0 var(--tr-gut)}
.tr-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- header ---------- */
.tr-head{background:var(--white);border-bottom:1px solid var(--rule-soft)}
.tr-head .tr-wrap{display:flex;align-items:center;gap:24px;min-height:80px;padding-top:12px;padding-bottom:12px}
.tr-brand{display:flex;align-items:center;gap:16px}
.tr-brand:hover{text-decoration:none}
.tr-mark{flex:none;display:grid;place-items:center;width:65px;height:42px;background:var(--registry);color:#fff;font-style:italic;font-weight:700;font-size:22px;line-height:26px}
.tr-brand-name{font-weight:600;font-size:13px;line-height:20px;color:var(--ink)}
.tr-brand-sub{font-family:var(--f-mono);font-weight:600;font-size:11.5px;line-height:20px;letter-spacing:.1em;color:var(--ink)}
.tr-head-nav{display:flex;align-items:center;gap:24px;margin-left:auto}
.tr-head-nav a{color:var(--ink-soft);font-weight:500;font-size:14px;line-height:21px}
.tr-head-cta{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:14px 16px;border:1px solid var(--rule);border-radius:2px;background:var(--white);color:var(--ink);font-weight:600;font-size:16px;line-height:24px;text-align:center}
.tr-head-cta:hover{border-color:var(--ink-soft);text-decoration:none}

/* ---------- footer ---------- */
.tr-foot{background:var(--white);border-top:1px solid var(--rule-soft)}
.tr-foot .tr-wrap{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;min-height:68px;padding-top:24px;padding-bottom:24px}
.tr-foot-legal{font-weight:400;font-size:13px;line-height:20px;color:var(--ink-soft)}
.tr-foot-links{display:flex;flex-wrap:wrap;gap:24px}
.tr-foot-links a{font-weight:400;font-size:13px;line-height:20px;color:var(--ink-soft)}

/* ---------- responsive ---------- */
@media (max-width:1280px){ :root{--tr-gut:48px} }
@media (max-width:1000px){
  :root{--tr-gut:32px}
  .tr-head-nav{gap:18px}
}
@media (max-width:720px){
  :root{--tr-gut:20px}
  .tr-head .tr-wrap{flex-wrap:wrap;gap:14px;padding-top:14px;padding-bottom:14px;min-height:0}
  .tr-head-nav{width:100%;margin-left:0;gap:16px;flex-wrap:wrap}
  .tr-head-cta{margin-left:auto}
  .tr-foot .tr-wrap{flex-direction:column;align-items:flex-start;gap:12px}
}