/* ==========================================================================
   Page chrome: ticker, nav, page containers, section rhythm, footer.
   ========================================================================== */

/* ---------- Ticker ---------- */
.ticker{
  background:var(--accent);color:#fff;
  padding:7px 0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  overflow:hidden;white-space:nowrap;font-weight:600;
}
.ticker-track{display:inline-block;padding-left:100%;animation:tick 40s linear infinite}
.ticker-track span{margin:0 36px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* On a phone this bar had no rules of its own: the same 11px, 600-weight,
   .16em-tracked caps as the desktop, in solid red, taking 32px off an 812px
   screen before the site started. Bold plus wide tracking is twice as loud at
   half the width, and .16em is three times the .05em ceiling the rest of the
   system holds small caps to.

   Lighter, tighter and shorter. It is a marquee, not a headline. */
@media (max-width:900px){
  .ticker{
    padding:5px 0;
    font-size:10px;
    font-weight:500;
    letter-spacing:.05em;
  }
  .ticker-track span{margin:0 22px}
}

/* ---------- Nav ---------- */
nav.top{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,10,.94);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--max);margin:0 auto;
  padding:14px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
/* The wordmark beside the badge.
   It used to be 10px uppercase at .18em tracking — the stretched-out small
   caps that every template reaches for. Next to a heavy chrome badge it read
   as a caption apologising for being there.
   Now it is a masthead: the display face the headings already use, sentence
   case, normal tracking, divided from the badge by a rule rather than by
   empty space. The rule is what makes it a lockup instead of two things that
   happen to be next to each other. */
.logo{display:flex;align-items:center;gap:13px}
.logo img{height:38px;width:auto}
.logo small{
  font-family:var(--font-display);
  font-weight:600;
  font-size:14px;
  letter-spacing:.005em;
  /* Set back from the badge rather than level with it: the logo is the mark,
     this is the context line. Full-strength ink made the two compete. */
  color:var(--ink-dim);
  text-transform:none;
  white-space:nowrap;
}
.logo-text{
  display:flex;flex-direction:column;line-height:1;
  padding-left:13px;
  border-left:1px solid var(--line-strong);
}

.nav-links{display:flex;gap:26px;list-style:none;align-items:center}
.nav-links a{
  font-size:13px;font-weight:500;letter-spacing:.02em;
  position:relative;padding:6px 0;transition:color .15s;
}
.nav-links a:hover{color:#fff}
.nav-links a.active{color:#fff}
.nav-links a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent);
}
.menu-toggle{
  display:none;background:none;border:1px solid var(--line-strong);color:var(--ink);
  padding:8px 14px;font-family:var(--font-body);font-weight:500;font-size:12px;
  letter-spacing:.06em;cursor:pointer;border-radius:2px;
}

/* ---------- Page containers ---------- */
.page{display:none}
.page.active{display:block}

/* ---------- Section rhythm ---------- */
section.block{
  max-width:var(--max);margin:0 auto;padding:64px var(--gutter);
  border-top:1px solid var(--line);
}
section.block.lead{border-top:none;padding-top:48px}

.section-title{font-size:clamp(30px,3.4vw,42px);margin-bottom:16px}
.section-sub{color:var(--ink-body);font-size:16px;max-width:660px;margin-bottom:40px}

/* ---------- Footer ---------- */
footer{
  background:var(--bg-2);border-top:1px solid var(--line);
  padding:52px var(--gutter) 26px;margin-top:72px;
}
.foot-inner{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px;
}
.foot-brand p{color:var(--ink-dim);font-size:14px;max-width:400px;margin-top:14px;line-height:1.65}
.foot-col h5{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);font-weight:600;margin-bottom:14px;
}
.foot-col a{display:block;padding:5px 0;font-size:13px;color:var(--ink-dim);transition:color .15s}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{
  max-width:var(--max);margin:0 auto;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
}
.foot-bottom small{font-size:12px;color:var(--ink-dim)}
.foot-bottom a{color:var(--ink-dim);text-decoration:underline}
.socials{display:flex;gap:16px}
.socials a{font-size:12px;color:var(--ink-dim);transition:color .15s}
.socials a:hover{color:var(--ink)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;background:var(--bg-2);padding:8px 0 12px;gap:0;
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 24px rgba(0,0,0,.45);
  }
  .nav-links.open{display:flex}
  /* Full-width rows a thumb can hit. The anchors are inline by default, so
     their vertical padding used to spill over the neighbouring rows instead of
     spacing them apart — which is why the menu looked squashed. */
  .nav-links li{display:block;width:100%}
  .nav-links a{
    display:block;padding:15px var(--gutter);width:100%;font-size:15px;
    border-bottom:none;-webkit-tap-highlight-color:transparent;
  }
  .nav-links a:hover,.nav-links a:active{background:var(--bg-3)}
  .nav-links a.active{
    color:#fff;font-weight:600;
    box-shadow:inset 3px 0 0 var(--accent);
  }
  .nav-links a.active::after{display:none}
  .menu-toggle{display:block}

  section.block{padding:48px var(--gutter-sm)}
  .foot-inner{grid-template-columns:1fr 1fr;gap:28px}
  .foot-brand{grid-column:1/-1}
}

@media (max-width:480px){
  .foot-inner{grid-template-columns:1fr}
}