/* layout.css - structure: bars, header, sections, footer, grids */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

/* announcement bar — slides between two messages */
.announce{
  --announce-h:52px;
  background:#1F2021;color:#efe9e1;
  height:var(--announce-h);overflow:hidden;
}
.announce__track{
  display:flex;flex-direction:column;
  animation:announceSlide 9s cubic-bezier(.76,0,.24,1) infinite;
}
.announce__item{
  height:var(--announce-h);flex:none;
  display:flex;align-items:center;justify-content:center;
  margin:0;padding:0 16px;max-width:none;text-align:center;
  font-family:var(--font-body);font-size:12px;font-weight:500;letter-spacing:.07em;
}
@keyframes announceSlide{
  0%,44%   {transform:translateY(0)}
  50%,94%  {transform:translateY(calc(var(--announce-h) * -1))}
  100%     {transform:translateY(0)}
}
/* with motion reduced the slide is killed, which would hide the second message
   entirely — so show both side by side instead */
@media (prefers-reduced-motion:reduce){
  .announce{height:auto}
  .announce__track{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:2px 22px;padding-block:9px}
  .announce__item{height:auto;padding:0}
}

/* utility bar — pinned to the bottom of the viewport */
.topbar{
  position:fixed;bottom:0;left:0;right:0;z-index:55;
  background:var(--bg);border-top:.5px solid var(--line);
  font-size:12px;font-weight:600;letter-spacing:.5px;color:var(--ink);
}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding-block:10px}
.topbar i,.topbar .ico{color:var(--accent)}
/* keep the fixed bar from covering the end of the page */
body{padding-bottom:44px}

/* header / nav */
.site-header{border-bottom:.5px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:50}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding-block:22px}
.brand{display:flex;align-items:baseline;gap:10px}
.brand .mark{font-family:var(--font-logo);font-weight:300;font-size:24px;letter-spacing:6px;color:var(--ink)}
.brand .sub{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--muted)}
.nav{display:flex;align-items:center;gap:24px}
.nav a:not(.btn){font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--text);transition:color .2s}
.nav a:not(.btn):hover{color:var(--ink)}
.nav-toggle{display:none}

/* sections */
.section{padding-block:clamp(40px,6vw,60px)}
.section--tight{padding-block:clamp(32px,4vw,46px)}
.band{background:var(--band)}
.rule-top{border-top:.5px solid var(--line)}

/* generic grids */
.grid{display:grid;gap:18px}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}

/* footer */
.site-footer{border-top:.5px solid var(--footer-line);padding-block:44px}
.site-footer .container{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.site-footer h4{font-family:var(--font-body);font-weight:400;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent-ink);margin:0 0 12px}
.site-footer p{font-size:13px;line-height:1.9;color:var(--text)}
.site-footer .mark{font-family:var(--font-logo);font-weight:300;font-size:22px;letter-spacing:5px;color:var(--ink)}
/* dark footer — a deeper tone than the header's bar, grounding the page */
.site-footer{background:#1F2021;border-top-color:rgba(255,255,255,.09)}
.site-footer h4{color:#9c9186}
.site-footer p{color:#c7c1b7}
.site-footer .muted{color:#8f887d}
.site-footer a{color:#e5dfd5;transition:color .2s}
.site-footer a:hover{color:#fff}
.site-footer .wordmark--footer .wordmark__name{background:#efe9e1}
.site-footer .wordmark__w,.site-footer .wordmark__c{color:#b6ada1}
.site-footer .btn--primary{background:#efe9e1;color:#2b2822}
.site-footer .btn--primary:hover{background:#fff}