/*
 * The page furniture that wraps the content: the floating header, the
 * ticker under the hero, and the footer.
 */

/* --- Header -------------------------------------------------------------
   Floats over the hero render rather than boxing it in. */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  transition: background .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
header.stuck {
  background: rgba(7,9,12,.84); backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.bar {
  max-width: var(--shell); margin: 0 auto; padding: 0 28px;
  display: flex; align-items: center; gap: 16px; height: 72px;
}

/* --- Reading progress ----------------------------------------------------
   A line along the header's bottom edge that fills as the page goes by.

   Scroll-driven CSS where the browser has it, which is no JavaScript at all
   and no scroll listener to throttle. Where it does not, a few lines in the
   page script set --p instead; both drive the same transform, so there is
   one definition of what the bar does.

   scaleX on a full-width element rather than animating width: width is a
   layout property and would reflow the header on every frame. */
.bar-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, rgba(251,191,36,.55), var(--amber));
  transform: scaleX(var(--p, 0)); transform-origin: left center;
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
/* Hidden until the header has something to sit on, so it never floats alone
   over the hero. */
header.stuck .bar-progress { opacity: 1; }

@supports (animation-timeline: scroll()) {
  .bar-progress {
    animation: bar-fill linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes bar-fill { from { transform: scaleX(0) } to { transform: scaleX(1) } }
.mark { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.mark img { width: 30px; height: 30px; }
.mark span { font-weight: 700; letter-spacing: .2em; font-size: 14px; }
.bar nav { margin-left: auto; display: flex; align-items: center; gap: 28px; font-size: 14.5px; }
.bar nav a { color: var(--text-dim); text-decoration: none; }
.bar nav a:hover { color: var(--text); }
.nav-cta {
  color: #0a0b0e !important; background: var(--amber);
  border-radius: 6px; padding: 9px 16px; font-weight: 600;
}
.nav-cta:hover { background: #fdd34f; }

/* The contract address, one tap away.
   Outlined rather than solid: people hunting for a CA will find it either
   way, and the install is still the thing we are actually asking for. It
   survives the narrow breakpoint alongside the install button, because
   someone who came looking for an address came looking for exactly this. */
.nav-ca {
  color: var(--amber) !important; border: 1px solid rgba(251,191,36,.42);
  border-radius: 6px; padding: 8px 14px; font-weight: 600;
  transition: background .2s, border-color .2s;
}
.nav-ca:hover { background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.7); }

@media (max-width: 820px) {
  .bar nav a:not(.nav-cta):not(.nav-ca) { display: none; }
  .bar nav { gap: 12px; }
}
@media (max-width: 440px) {
  .nav-ca { padding: 8px 11px; }
  .nav-cta { padding: 9px 12px; }
  .bar nav { gap: 9px; font-size: 13.5px; }
}

/* --- Ticker -------------------------------------------------------------- */
.ticker {
  position: relative; z-index: 3;
  border-top: 1px solid var(--line);
  background: rgba(7,9,12,.55); backdrop-filter: blur(8px);
  overflow: hidden;
}
.ticker-row {
  display: flex; gap: 46px; white-space: nowrap; padding: 13px 28px;
  font-family: var(--mono); font-size: 12px; color: var(--text-faint);
  letter-spacing: .04em;
  width: max-content; animation: slide 52s linear infinite;
}
.ticker-row b { color: var(--text-dim); font-weight: 500; }
@keyframes slide { to { transform: translateX(-50%); } }

/* --- Footer -------------------------------------------------------------- */
/* --- Footer -------------------------------------------------------------
   The mark and the wordmark sit on one line above the paragraph rather than
   floating beside it, and every link label is short enough not to wrap: a
   column where one item runs onto a second line makes the whole row look
   unkempt, however carefully the rest is spaced.
*/
footer { border-top: 1px solid var(--line); padding: 76px 0 40px; }

.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px; padding-bottom: 54px;
}

.foot-mark {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; margin-bottom: 18px;
}
.foot-mark img { display: block; }
.foot-mark span {
  font-weight: 700; letter-spacing: .2em; font-size: 13px; color: var(--text);
}
.foot-say p { color: var(--text-dim); font-size: 14.8px; max-width: 54ch; }

.foot-nav {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px; align-content: start;
}
.foot-nav div { display: grid; gap: 12px; align-content: start; }
.foot-nav b {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-faint); font-weight: 400;
  margin-bottom: 2px;
}
.foot-nav a {
  color: var(--text-dim); text-decoration: none; font-size: 14.2px;
  white-space: nowrap;
}
.foot-nav a:hover { color: var(--amber); }

.foot-base {
  display: flex; gap: 30px; align-items: baseline; flex-wrap: wrap;
  padding-top: 24px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; color: var(--text-faint);
}
.foot-dis { margin-left: auto; max-width: 56ch; line-height: 1.7; text-align: right; }

@media (max-width: 900px) {
  .foot-top { grid-template-columns: 1fr; gap: 40px; }
  .foot-dis { margin-left: 0; text-align: left; }
}
@media (max-width: 560px) {
  .foot-nav { grid-template-columns: 1fr 1fr; gap: 26px; }
}