/* ============================================================
   Components the static build did not have.

   The approved demo pages carried a review bar instead of a real
   site header, and had no footer, paywall or note template. These
   are built on the same tokens as theme.css so they sit inside the
   existing design rather than beside it.

   Every class here is prefixed. The static build lost half a day to
   `.c` and `.row` colliding with Bootstrap; that is not repeated.
   ============================================================ */

/* ---------- announcement ---------- */
.hft-announce{
  background:var(--navy-3); color:var(--cream);
  font-size:.8rem; font-weight:600; letter-spacing:.02em;
  text-align:center; padding:8px 16px;
}

/* ---------- header ---------- */
.hft-sitenav{
  position:sticky; top:0; z-index:900;
  background:color-mix(in srgb, var(--navy) 92%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hft-sitenav-in{
  display:flex; align-items:center; gap:24px;
  min-height:66px;
}
.hft-brand{
  color:#fff; font-weight:800; font-size:1.05rem; letter-spacing:-.02em;
  text-decoration:none; white-space:nowrap;
}
.hft-brand:hover{ color:var(--gold-hi); }
.hft-logo{ max-height:36px; width:auto; display:block; }

.hft-menu{ display:flex; align-items:center; gap:24px; margin-left:auto; }
.hft-menu-list{
  display:flex; align-items:center; gap:22px;
  list-style:none; margin:0; padding:0;
}
.hft-menu-list a{
  color:rgba(255,255,255,.82); text-decoration:none;
  font-size:.88rem; font-weight:600; letter-spacing:-.005em;
  padding:6px 0; border-bottom:2px solid transparent;
}
.hft-menu-list a:hover,
.hft-menu-list .current-menu-item > a{
  color:#fff; border-bottom-color:var(--brand-hi);
}
.hft-sitenav-actions{ display:flex; align-items:center; gap:14px; }
.hft-signin{
  color:rgba(255,255,255,.82); text-decoration:none;
  font-size:.88rem; font-weight:600;
}
.hft-signin:hover{ color:#fff; }

.hft-burger{
  display:none; margin-left:auto;
  background:none; border:0; cursor:pointer;
  width:40px; height:40px; padding:9px 8px;
}
.hft-burger span{
  display:block; height:2px; background:#fff; border-radius:2px;
  margin:4px 0; transition:transform .18s ease, opacity .18s ease;
}
.hft-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.hft-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hft-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:900px){
  .hft-burger{ display:block; }
  .hft-menu{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--navy); border-bottom:1px solid rgba(255,255,255,.1);
    padding:10px 20px 18px;
  }
  .hft-menu.open{ display:flex; }
  .hft-menu-list{ flex-direction:column; align-items:stretch; gap:0; }
  .hft-menu-list a{ display:block; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.08); }
  .hft-sitenav-actions{ margin-top:14px; }
}

/* ---------- paywall ---------- */
.hft-paywall{
  position:relative; margin:38px 0 10px;
  border:1px solid var(--line); border-radius:12px;
  background:var(--ground-2);
  padding:34px 30px;
  text-align:center;
}
.hft-paywall::before{
  /* fades the last visible paragraph into the wall */
  content:""; position:absolute; left:0; right:0; top:-90px; height:90px;
  background:linear-gradient(to bottom, transparent, var(--ground));
  pointer-events:none;
}
.hft-paywall-in{ max-width:56ch; margin:0 auto; }
.hft-paywall h2{
  font-size:clamp(1.25rem,2.4vw,1.7rem); font-weight:760;
  letter-spacing:-.02em; margin:.35em 0 .5em; color:var(--ink);
}
.hft-paywall p{ color:var(--ink-2); margin:0 0 20px; }
.hft-paywall .hero-cta{ justify-content:center; }

/* ---------- note ---------- */
.note-head{ padding:52px 0 12px; max-width:74ch; }
.note-head h1{
  font-size:clamp(1.9rem,4vw,3rem); font-weight:780;
  letter-spacing:-.03em; line-height:1.1; margin:.2em 0 .35em; color:var(--ink);
}
.standfirst{ font-size:1.08rem; color:var(--ink-2); line-height:1.6; margin:0 0 18px; }
.note-meta{
  display:flex; gap:16px; align-items:center;
  font-size:.8rem; color:var(--ink-3);
  border-top:1px solid var(--line-soft); padding-top:14px;
}
.note-hero{ margin:26px 0; }
.note-hero img{ width:100%; height:auto; border-radius:10px; display:block; }
.note-body{ max-width:72ch; padding-bottom:60px; font-size:1.02rem; line-height:1.72; color:var(--ink-2); }
.note-body h2,.note-body h3{ color:var(--ink); letter-spacing:-.02em; margin:1.6em 0 .5em; }
.note-body img{ max-width:100%; height:auto; border-radius:8px; }

.c-lock{
  display:inline-block; margin-top:10px;
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold-hi);
}
.c-thumb img{ width:100%; height:auto; border-radius:8px 8px 0 0; display:block; }

/* ---------- generic page / archive ---------- */
.hft-page, .hft-archive, .hft-404{ padding:52px 0 70px; }
.hft-page-body{ max-width:72ch; font-size:1.02rem; line-height:1.72; color:var(--ink-2); }
.hft-404 .hero-cta{ margin-top:8px; }

/* ---------- footer ---------- */
.hft-foot{
  background:var(--navy); color:rgba(255,255,255,.78);
  margin-top:70px; padding:52px 0 26px;
}
.hft-foot-in{
  display:grid; grid-template-columns:1.6fr 1fr; gap:40px;
  padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.1);
}
.hft-foot-word{ color:#fff; font-weight:800; font-size:1.1rem; letter-spacing:-.02em; }
.hft-foot-brand p{ margin:12px 0 16px; max-width:52ch; font-size:.9rem; line-height:1.65; }
.hft-social{ display:flex; gap:18px; }
.hft-social a,
.hft-foot-mail{ color:var(--gold-hi); text-decoration:none; font-size:.85rem; font-weight:600; }
.hft-social a:hover,
.hft-foot-mail:hover{ color:#fff; }
.hft-foot-list{ list-style:none; margin:0 0 14px; padding:0; display:grid; gap:9px; }
.hft-foot-list a{ color:rgba(255,255,255,.78); text-decoration:none; font-size:.88rem; }
.hft-foot-list a:hover{ color:#fff; }
.hft-legal{
  padding:22px 0 0; font-size:.74rem; line-height:1.6; color:rgba(255,255,255,.5);
  max-width:none;
}
.hft-copy{ padding:16px 0 0; font-size:.74rem; color:rgba(255,255,255,.4); }

@media (max-width:760px){
  .hft-foot-in{ grid-template-columns:1fr; gap:28px; }
}

/* ---------- pricing adjustments ----------
   .price .n is set in a tabular numeral face, which is right for "$2,500"
   and wrong for "On enquiry" — the words come out looking like a monospace
   code sample. Enquiry-only plans get the normal face at a matched size. */
.price .n-words{
  font-family:inherit; font-variant-numeric:normal;
  letter-spacing:-.02em; font-size:.72em;
}
.plan-foot{
  margin:34px 0 0; text-align:center;
  font-size:.85rem; color:var(--ink-3);
}

/* The "Latest: …" link inside a trading-day slot. The static build had no
   link here at all, so it was falling through to the browser default. */
.slot a{
  display:inline-block; margin-top:12px;
  color:var(--brand-hi); text-decoration:none;
  font-size:.82rem; font-weight:700; line-height:1.45;
}
.slot a:hover{ text-decoration:underline; }

/* ============================================================
   Daily sentiment board
   Real readings joined from two feeds. The page exists to make
   extremes findable, so state colour does the heavy lifting and
   everything else stays quiet.
   ============================================================ */
.hft-sentiment{ padding:44px 0 70px; }

.sent-filters{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.sent-f{
  border:1px solid var(--line); background:var(--ground); color:var(--ink-2);
  padding:7px 15px; border-radius:2rem; cursor:pointer;
  font-size:.82rem; font-weight:650; letter-spacing:-.005em;
}
.sent-f:hover{ border-color:var(--brand); color:var(--brand-hi); }
.sent-f.on{ background:var(--brand); border-color:var(--brand); color:#fff; }

.sent-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:10px; }
.sent-table{ width:100%; border-collapse:collapse; font-size:.9rem; min-width:660px; }
.sent-table thead th{
  text-align:left; padding:12px 16px;
  font-size:.68rem; font-weight:750; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); background:var(--ground-2);
  border-bottom:1px solid var(--line);
}
.sent-table th.num, .sent-table td.num{ text-align:right; }
.sent-table tbody tr{ border-bottom:1px solid var(--line-soft); }
.sent-table tbody tr:last-child{ border-bottom:0; }
.sent-table tbody tr:hover{ background:var(--ground-2); }
.sent-table td, .sent-table tbody th{ padding:11px 16px; vertical-align:middle; }
.sent-table tbody th{ text-align:left; font-weight:inherit; }

.m-name{ display:block; font-weight:680; color:var(--ink); letter-spacing:-.01em; }
.m-group{ display:block; font-size:.7rem; color:var(--ink-3); margin-top:1px; }

.sent-table .strong{ font-weight:750; color:var(--ink); font-variant-numeric:tabular-nums; }
.sent-table .num{ font-variant-numeric:tabular-nums; }
.sent-table .up{ color:var(--ok); font-weight:680; }
.sent-table .down{ color:var(--bad); font-weight:680; }
.sent-table .muted{ color:var(--ink-3); }

.bar-cell{ width:32%; min-width:130px; }
.bar{ display:block; height:7px; border-radius:4px; background:var(--ground-3); overflow:hidden; }
.bar > span{ display:block; height:100%; border-radius:4px; background:var(--ink-3); }
.bar.s-extreme-high > span{ background:var(--bad); }
.bar.s-high > span{ background:var(--warn); }
.bar.s-neutral > span{ background:var(--ink-3); }
.bar.s-low > span{ background:#4a7fb5; }
.bar.s-extreme-low > span{ background:var(--ok); }

.pill{
  display:inline-block; padding:3px 10px; border-radius:2rem;
  font-size:.7rem; font-weight:720; letter-spacing:.02em; white-space:nowrap;
}
.pill.s-extreme-high{ background:rgba(165,35,26,.12); color:var(--bad); }
.pill.s-high{ background:rgba(138,100,16,.13); color:var(--warn); }
.pill.s-neutral{ background:var(--ground-3); color:var(--ink-3); }
.pill.s-low{ background:rgba(74,127,181,.14); color:#4a7fb5; }
.pill.s-extreme-low{ background:rgba(27,122,80,.12); color:var(--ok); }

.sent-note{ margin-top:16px; font-size:.8rem; color:var(--ink-3); }

/* Non-member view: shape without numbers. */
.sent-teaser{ position:relative; }
.sent-teaser-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px;
  filter:blur(3px); opacity:.5; pointer-events:none; user-select:none;
}
.sent-blur{
  display:flex; justify-content:space-between; align-items:center;
  border:1px solid var(--line); border-radius:8px; padding:12px 14px;
  font-size:.84rem;
}
.sent-blur .m{ color:var(--ink-2); font-weight:640; }
.sent-blur .v{ color:var(--ink-3); letter-spacing:.1em; }

/* ---------- header, revisited ----------
   The nav was laid out for four items and now carries nine plus two actions,
   which wrapped to two cramped lines between roughly 900px and 1300px. Tighten
   the spacing through the middle range and hand over to the burger earlier,
   rather than letting a nine-item bar wrap on a laptop. */
@media (min-width:901px) and (max-width:1300px){
  .hft-menu{ gap:16px; }
  .hft-menu-list{ gap:14px; }
  .hft-menu-list a{ font-size:.82rem; }
  .hft-sitenav-actions{ gap:10px; }
  .hft-sitenav-actions .btn{ padding:8px 14px; font-size:.82rem; }
  .hft-signin{ font-size:.82rem; }
}
@media (max-width:1100px){
  .hft-burger{ display:block; }
  .hft-menu{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--navy); border-bottom:1px solid rgba(255,255,255,.1);
    padding:10px 20px 18px; z-index:950;
  }
  .hft-menu.open{ display:flex; }
  .hft-menu-list{ flex-direction:column; align-items:stretch; gap:0; }
  .hft-menu-list a{ display:block; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:.92rem; }
  .hft-sitenav-actions{ margin-top:14px; }
}

/* ---------- brand ----------
   The logo is 350x131, so it is wide rather than square. Height-constrain it
   and let width follow, with the intrinsic width/height attributes in the
   markup reserving the space so the bar does not jump on load. */
.hft-brand{ display:flex; align-items:center; flex-shrink:0; line-height:0; }
.hft-logo{
  height:34px; width:auto; max-width:190px;
  object-fit:contain; display:block;
}
.hft-wordmark{ line-height:1.2; }
@media (max-width:600px){
  .hft-logo{ height:28px; max-width:150px; }
}

/* ---------- brand, corrected ----------
   The logo is a detailed wordmark — "HEDGE FUND TELEMETRY" ruled in a box with
   the chart motif under it — at 350x131. Production renders it 96px tall. At
   the 34px I first used, the lettering came out around 4px and was illegible;
   it read as a smudge, which is exactly what it looked like.

   48px is the compromise: the wordmark is readable, and the bar stays a
   sensible height. That makes the logo ~128px wide, which alongside nine links
   and two buttons no longer fits on a laptop, so the burger takes over earlier
   rather than the bar wrapping. */
.hft-sitenav-in{ min-height:76px; gap:20px; }
.hft-logo{ height:48px; max-width:none; }

@media (max-width:1350px){
  .hft-burger{ display:block; }
  .hft-menu{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--navy); border-bottom:1px solid rgba(255,255,255,.1);
    padding:10px 20px 18px; z-index:950;
  }
  .hft-menu.open{ display:flex; }
  .hft-menu-list{ flex-direction:column; align-items:stretch; gap:0; }
  .hft-menu-list a{ display:block; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:.92rem; }
  .hft-sitenav-actions{ margin-top:14px; }
}
@media (max-width:600px){
  .hft-sitenav-in{ min-height:64px; }
  .hft-logo{ height:38px; }
}