/* ============================================================
   THE DESK — DropForecast design system (single source).
   Tokens, the one masthead + nav + footer, and the shared tile
   grammar. Every page links this. The metaphor: a trading desk's
   terminal — precise, live, numeric. Purple is the brand accent,
   orange is the action, the dark board is where data lives, and
   Space Mono is the voice of every number and timestamp.
   ============================================================ */
:root{
  --paper:#f4f1ea; --card:#ffffff; --ink:#141519; --sub:#6b6f76; --faint:#9a9ea6;
  --line:#e3e0d7; --line2:#eeebe3;
  --orange:#F56423; --orange-ink:#c94e15; --purple:#4D1979; --purple-soft:#eee6f7;
  --board:#141519; --board2:#1d1e26; --boardtxt:#efeef5; --boardmute:#9a9ea6; --boardline:#2a2b34;
  --live:#17c274; --amber:#f0a52c; --red:#e0392b;
  --cop:#17c274; --watch:#f0a52c; --pass:#e0392b;
  --disp:'Anton',Impact,'Arial Narrow Bold',sans-serif;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --wm:'Chango',system-ui,sans-serif;
  --r:10px; --shadow:0 1px 2px rgba(20,21,25,.06),0 8px 24px -12px rgba(20,21,25,.18);
  --shadow-hi:0 2px 4px rgba(20,21,25,.08),0 18px 40px -16px rgba(20,21,25,.28);
}
html{color-scheme:light}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
.dwrap{max-width:1240px;margin:0 auto;padding:0 22px}
.mono{font-family:var(--mono)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- masthead ---------- */
.desk-head{position:sticky;top:0;z-index:60;background:rgba(244,241,234,.92);backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);border-top:3px solid var(--purple)}
.desk-head .drow{display:flex;align-items:center;gap:22px;height:64px}
.dbrand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;color:inherit}
.dbrand img{height:40px;width:40px;object-fit:contain}
.dwordmark{font-family:var(--wm);font-weight:400;font-size:22px;letter-spacing:-.005em;line-height:1;white-space:nowrap;
  transform:skewX(-8deg);transform-origin:left center;display:inline-block}
.dwordmark em{font-style:normal;color:var(--orange)}
.dwordmark i{font-style:normal;color:var(--purple)}
.dnav{display:flex;gap:2px;margin-left:6px;overflow-x:auto;scrollbar-width:none;flex:0 0 auto}
.dnav::-webkit-scrollbar{display:none}
.dnav a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);
  text-decoration:none;padding:8px 10px;border-radius:6px;white-space:nowrap;position:relative;transition:color .15s,background .15s}
.dnav a:hover{color:var(--ink);background:var(--line2)}
.dnav a.act{color:var(--ink)}
.dnav a.act:after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:2px;background:var(--orange);border-radius:2px}
.dsearch{margin-left:auto;display:flex;align-items:center;height:38px;border:1px solid var(--line);border-radius:999px;background:#fff;overflow:hidden;
  flex:0 1 340px;min-width:150px}
.dsearch input{flex:1;border:0;outline:0;height:100%;padding:0 14px;font:inherit;font-size:13px;color:var(--ink);background:transparent;min-width:0}
.dsearch input::placeholder{color:var(--faint)}
.dsearch .go{height:100%;padding:0 14px;border:0;cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--ink);flex-shrink:0}
.dsearch .go:hover{background:var(--orange)}
.dcta{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--ink);text-decoration:none;
  padding:11px 16px;border-radius:999px;flex-shrink:0;transition:background .15s}
.dcta:hover{background:var(--purple)}
@media (max-width:900px){
  .desk-head .drow{gap:12px;height:58px}
  .dsearch{display:none}
  .dwordmark{font-size:19px}
  /* the nav must SHRINK here so it scrolls inside its own box instead of
     widening the document (flex:0 0 auto is for desktop, where there's room) */
  .dnav{flex:1 1 auto;min-width:0;margin-left:0;-webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(90deg,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .dnav a{padding:8px 8px}
}
@media (max-width:640px){
  .dcta{display:none}
}

/* ---------- section heads ---------- */
.dhead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:44px 0 16px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.dhead h2{font-family:var(--disp);font-weight:400;font-size:clamp(22px,3vw,30px);letter-spacing:.02em;text-transform:uppercase;margin:0;line-height:1}
.dhead .dsub{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);text-align:right;white-space:nowrap}
.dhead .dsub b{color:var(--ink)}
@media (max-width:640px){
  .dhead{flex-direction:column;align-items:flex-start;gap:8px}
  .dhead .dsub{text-align:left;white-space:normal}
  .dlive{flex-wrap:wrap;line-height:1.6}
}

/* ---------- live indicator ---------- */
.dlive{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--live)}
.dlive i{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 rgba(23,194,116,.45);animation:dpulse 2s ease-out infinite}
@keyframes dpulse{0%{box-shadow:0 0 0 0 rgba(23,194,116,.45)}70%{box-shadow:0 0 0 9px rgba(23,194,116,0)}100%{box-shadow:0 0 0 0 rgba(23,194,116,0)}}

/* ---------- verdict pills ---------- */
.dv{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:4px 8px;border-radius:4px;color:#fff}
/* pills carry white text at 10px — use the darker ink of each hue so they pass ≥4:1 */
.dv.cop{background:#0e8a4f} .dv.watch{background:var(--watch);color:#1a1200} .dv.pass{background:#c42f22}

/* ---------- forecast tile (the Desk board) ---------- */
.dtile{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 16px 14px;text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease,border-color .18s;min-width:0}
.dtile:hover{transform:translateY(-3px);box-shadow:var(--shadow-hi);border-color:#d6d2c7}
.dtile .drow1{display:flex;align-items:center;justify-content:flex-start;gap:10px;padding-right:76px}
.dtile .dcat{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.dtile .dpic{aspect-ratio:4/3;border-radius:6px;background:linear-gradient(180deg,#f1eee6,#e9e6dd);overflow:hidden;display:flex;align-items:center;justify-content:center}
.dtile .dpic img{width:100%;height:100%;object-fit:cover}
.dtile .dname{font-weight:800;font-size:14.5px;line-height:1.25;letter-spacing:-.01em;min-height:2.5em;text-wrap:balance}
.dtile .dmult{display:flex;align-items:baseline;gap:6px;line-height:1}
.dtile .dmult .n{font-family:var(--disp);font-size:44px;letter-spacing:.005em;color:var(--ink)}
.dtile .dmult .x{font-family:var(--disp);font-size:24px;color:var(--orange)}
.dtile .dmult .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sub);margin-left:4px}
.dtile .dmeta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--sub)}
.dtile .dmeta b{color:var(--ink);font-weight:700}
.dcount{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);font-variant-numeric:tabular-nums}
.dcount.soon{color:var(--orange-ink)} .dcount.now{color:var(--live)}
.dspark{display:block;width:100%;height:30px}
.dspark path{fill:none;stroke:var(--purple);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dspark .area{fill:url(#dsg);stroke:none}
.dspark circle{fill:var(--orange)}
.dheat{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.dheat .bar{height:6px;background:var(--line2);border-radius:3px;overflow:hidden}
.dheat .bar i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--purple),var(--orange));transition:width .9s cubic-bezier(.2,.8,.2,1)}
.dheat .bar.sup i{background:linear-gradient(90deg,#8a8fa0,var(--ink))}
.dtile .dwhy{font-size:12px;line-height:1.4;color:var(--sub);max-height:0;overflow:hidden;opacity:0;transition:max-height .25s ease,opacity .25s ease,margin .25s}
.dtile:hover .dwhy,.dtile:focus-within .dwhy{max-height:6em;opacity:1;margin-top:2px}
.dtrack{position:absolute;top:10px;right:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);
  background:#fff;color:var(--sub);border-radius:999px;padding:4px 8px;cursor:pointer;transition:all .15s}
.dtrack:hover{border-color:var(--ink);color:var(--ink)}
.dtrack.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- board surface (terminal-dark data) ---------- */
.dboard{background:var(--board);color:var(--boardtxt);border-radius:12px;border:1px solid var(--boardline);overflow:hidden}
.dboard .bhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--boardline);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--boardmute)}
.dboard .bhead b{color:var(--boardtxt)}
.dboard .brow{display:grid;grid-template-columns:96px 1fr auto;gap:14px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--boardline);
  font-family:var(--mono);font-size:12px;text-decoration:none;color:inherit;transition:background .15s}
.dboard .brow:hover{background:var(--board2)}
.dboard .brow .when{color:var(--amber);font-weight:700;letter-spacing:.06em}
.dboard .brow .when.now{color:var(--live)}
.dboard .brow .what{font-family:var(--sans);font-weight:700;font-size:13px;color:var(--boardtxt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dboard .brow .tag{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;border-radius:3px;background:var(--purple);color:#fff}

/* ---------- strap / receipts ---------- */
.dstrap{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;padding:14px 18px;background:var(--purple-soft);border:1px solid #e2d8ef;border-radius:var(--r);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--purple)}
.dstrap b{font-family:var(--disp);font-size:22px;letter-spacing:.02em;color:var(--purple);margin-right:2px;line-height:1}

/* ---------- motion ---------- */
html.js .reveal{opacity:0;transform:translateY(12px);transition:opacity .42s ease,transform .42s ease}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .dlive i{animation:none}
  .dtile,.dtile:hover{transition:none;transform:none}
  .dheat .bar i{transition:none}
}

/* ---------- ad slots: reserve the box so nothing shifts ---------- */
.df-ad{min-height:110px}

/* ---------- footer ---------- */
.desk-foot{margin-top:70px;background:var(--board);color:var(--boardtxt);border-top:3px solid var(--purple);padding:44px 0 28px}
.desk-foot .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px}
.desk-foot .dwordmark{font-size:19px}
.desk-foot .fabout{font-size:13px;line-height:1.5;color:var(--boardmute);max-width:34ch;margin:12px 0 10px}
.desk-foot .flive{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--live);display:flex;align-items:center;gap:8px;margin:0}
.desk-foot .flive i{width:7px;height:7px;border-radius:50%;background:var(--live);animation:dpulse 2s ease-out infinite}
.desk-foot .fk{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--boardmute);margin-bottom:10px}
.desk-foot .flinks{display:flex;flex-direction:column;gap:7px}
.desk-foot .flinks a{color:var(--boardtxt);text-decoration:none;font-size:13px}
.desk-foot .flinks a:hover{color:var(--orange)}
.desk-foot .fdisc{margin:30px 0 0;font-size:11.5px;line-height:1.55;color:var(--boardmute);max-width:80ch}
.desk-foot .fcopy{margin:8px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--boardmute)}
@media (max-width:820px){.desk-foot .fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.desk-foot .fgrid{grid-template-columns:1fr}}

/* ---------- metric tooltips: every number wears its name + definition ---------- */
.dmetric{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--sub);text-decoration:none;border-bottom:1px dotted var(--faint);cursor:help;white-space:nowrap}
.dmetric .ml{text-transform:uppercase;letter-spacing:.12em;font-size:9.5px}
.dmetric b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.dmetric:hover{color:var(--ink);border-bottom-color:var(--orange)}
.dv[title]{cursor:help}