/* The Whale Wire. Layout: a tabloid front page printed in four inks. One lead story with its chart, a blue
   scoreboard band, a patchwork of colored story boxes, the "closest to the edge" list, and a yellow alerts band.
   Pink = liquidations and shorts, green = longs and winners, blue = options, yellow = funding and highlights. */
:root {
  --paper: #fbfaf6;
  --paper-deep: #f1eee6;
  --ink: #1a1830;
  --ink-soft: #57536d;
  --rule: #d9d4c7;
  --pink: #ff4f9a;
  --pink-ink: #c4125d;
  --pink-wash: #ffe1ee;
  --blue: #3355ff;
  --blue-ink: #2340d8;
  --blue-wash: #e3e8ff;
  --green: #00b377;
  --green-ink: #00784f;
  --green-wash: #d4f5e6;
  --yellow: #ffd43b;
  --yellow-wash: #fff3c6;
  --on-ink: #fbfaf6;
  --on-blue: #ffffff;
  --up-on-ink: #5ee6ad;
  --down-on-ink: #ff8fbd;
  --display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --text: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.55 var(--text);
  overflow-wrap: break-word;
}
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 900px) {
  .wrap { padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); }
}

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 16px; top: 8px; z-index: 5; background: var(--yellow); color: var(--ink); padding: 6px 10px; border: 2px solid var(--ink); }

.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }

/* Ticker */
.ticker { background: var(--ink); color: var(--on-ink); font: 500 12px/1 var(--mono); }
.ticker-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 11px;
  white-space: nowrap;
}
.ticker-inner::-webkit-scrollbar { display: none; }
.ticker-items { display: flex; gap: 22px; }
.tick b { font-weight: 700; margin-right: 6px; }
.tick .up { color: var(--up-on-ink); }
.tick .down { color: var(--down-on-ink); }
.ticker .status { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--on-ink); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up-on-ink); flex: none; animation: pulse 2s ease-in-out infinite; }
.dot.off { background: var(--down-on-ink); animation: none; }
@keyframes pulse { 50% { opacity: 0.25; } }

/* Masthead */
.mast { border-bottom: 3px solid var(--ink); }
.mast-row { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 40px; padding-block: 28px 20px; }
.logo { margin: 0; position: relative; flex: none; }
.logo a {
  display: block;
  background: var(--pink);
  color: var(--ink);
  text-decoration: none;
  border: 3px solid var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
  padding: 10px 20px 12px 16px;
  font: 800 66px/0.84 var(--display);
  font-stretch: 75%;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.logo-word { display: block; }
.sticker {
  position: absolute;
  top: -24px;
  right: -36px;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  background: var(--yellow);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 50%;
  font: 800 12px/1 var(--mono);
  text-transform: uppercase;
  transform: rotate(12deg);
}
.mast-copy { flex: 1 1 340px; min-width: 0; }
.mast-tag {
  margin: 0 0 12px;
  max-width: 24ch;
  font: 750 31px/1.1 var(--display);
  font-stretch: 88%;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.mast-meta { margin: 0; color: var(--ink-soft); font: 500 11.5px/1.7 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }
.sections { display: flex; flex-wrap: wrap; gap: 10px; padding-block: 0 20px; }
.chip {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 6px 13px;
  background: var(--paper);
  color: var(--ink);
  font: 700 11.5px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
}
a.chip:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.chip-pink { background: var(--pink); }
.chip-blue { background: var(--blue); color: var(--on-blue); }
.chip-green { background: var(--green); }
.chip-yellow { background: var(--yellow); }

/* Category tags on stories */
.tag {
  display: inline-block;
  align-self: flex-start;
  border: 2px solid var(--ink);
  padding: 5px 9px;
  background: var(--paper);
  color: var(--ink);
  font: 700 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tag-pink { background: var(--pink); }
.tag-blue { background: var(--blue); color: var(--on-blue); }
.tag-green { background: var(--green); }
.tag-yellow { background: var(--yellow); }

/* Lead story */
.lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 44px; align-items: start; padding-block: 40px 52px; }
.lead-text { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.lead h2 {
  margin: 0;
  font: 800 clamp(40px, 5.6vw, 78px)/0.97 var(--display);
  font-stretch: 78%;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hl { background: var(--yellow); padding: 0 0.08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.deck { margin: 0; max-width: 40em; font-size: 20px; line-height: 1.5; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin: 0; background: var(--ink); border: 2px solid var(--ink); }
.fact { min-width: 0; padding: 12px 14px 14px; background: var(--paper); }
.fact:nth-child(1) { background: var(--yellow-wash); }
.fact:nth-child(2) { background: var(--pink-wash); }
.fact:nth-child(3) { background: var(--blue-wash); }
.fact:nth-child(4) { background: var(--green-wash); }
.fact dt { color: var(--ink-soft); font: 600 10.5px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }
.fact dd { margin: 6px 0 0; font: 800 27px/1.05 var(--display); font-stretch: 85%; font-variant-numeric: tabular-nums; }
.fact dd small { display: block; margin-top: 4px; color: var(--ink-soft); font: 500 12px/1.3 var(--mono); }
.byline { margin: 0; color: var(--ink-soft); font: 500 12px/1.6 var(--mono); }
.byline a { color: var(--ink); }

.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 2px solid var(--ink);
  padding: 9px 13px;
  background: var(--paper);
  color: var(--ink);
  font: 700 14px/1 var(--text);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.btn-pink { background: var(--pink); }
.btn-blue { background: var(--blue); color: var(--on-blue); }
.btn-small { padding: 7px 10px; font-size: 13px; }

.chart-card { min-width: 0; margin: 0; padding: 18px 18px 14px; border: 3px solid var(--ink); background: var(--paper); box-shadow: 9px 9px 0 var(--pink); }
.chart-card h3 { margin: 0 0 2px; font: 800 21px/1.2 var(--display); font-stretch: 88%; }
.chart-sub { margin: 0 0 10px; color: var(--ink-soft); font: 500 12px/1.5 var(--mono); }
.chart { min-height: 200px; }
.chart svg { display: block; width: 100%; height: auto; }
.chart-card figcaption { margin-top: 8px; color: var(--ink-soft); font: 500 11.5px/1.6 var(--mono); }
.c-grid { stroke: var(--rule); stroke-width: 1; }
.c-axis { fill: var(--ink-soft); font: 500 11px var(--mono); font-stretch: 80%; }
.c-area { fill: var(--blue-wash); }
.c-line { fill: none; stroke: var(--blue-ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.c-liq { stroke: var(--pink-ink); stroke-width: 2.5; stroke-dasharray: 6 4; }
.c-liq-box { fill: var(--pink); stroke: var(--ink); stroke-width: 2; }
.c-liq-text { fill: var(--ink); font: 700 11px var(--mono); font-stretch: 80%; }
.c-now-dot { fill: var(--ink); stroke: var(--paper); stroke-width: 3; }
.c-now-text { fill: var(--ink); font: 700 11px var(--mono); font-stretch: 80%; }

/* Bands */
.band { padding-block: 46px 50px; }
.band-blue { background: var(--blue); color: var(--on-blue); }
.band-yellow { background: var(--yellow); color: var(--ink); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.kicker { margin: 0; font: 700 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }

.score-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 30px 52px; align-items: center; }
.score h2 { margin: 10px 0 12px; font: 800 clamp(34px, 4.4vw, 58px)/0.98 var(--display); font-stretch: 78%; letter-spacing: -0.015em; text-wrap: balance; }
.score p { margin: 0; max-width: 34em; }
.split { display: flex; height: 68px; border: 3px solid var(--ink); background: var(--paper); }
.split > div { min-width: 2px; display: flex; align-items: center; padding: 0 12px; overflow: hidden; color: var(--ink); font: 800 22px/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.split .short { background: var(--pink); }
.split .long { background: var(--green); justify-content: flex-end; border-left: 3px solid var(--ink); }
.split-labels { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font: 700 12.5px/1.4 var(--mono); text-transform: uppercase; }
.score-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.stat { min-width: 0; padding-top: 10px; border-top: 3px solid currentColor; }
.stat b { display: block; font: 800 36px/1 var(--display); font-stretch: 85%; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 6px; font: 500 12px/1.45 var(--mono); }

/* Story grid */
.stories { padding-block: 52px 44px; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 24px; padding-bottom: 10px; border-bottom: 3px solid var(--ink); }
.section-head h2 { margin: 0; font: 800 36px/1 var(--display); font-stretch: 80%; letter-spacing: -0.01em; }
.section-head p { margin: 0; color: var(--ink-soft); font: 500 12px/1.5 var(--mono); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.story { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 16px; border: 2px solid var(--ink); background: var(--paper); }
.story.pink { background: var(--pink-wash); }
.story.blue { background: var(--blue-wash); }
.story.green { background: var(--green-wash); }
.story.yellow { background: var(--yellow-wash); }
.story h3 { margin: 0; font: 800 27px/1.04 var(--display); font-stretch: 84%; letter-spacing: -0.01em; text-wrap: balance; }
.story p { margin: 0; font-size: 16px; line-height: 1.5; }
.big { font: 800 46px/1 var(--display); font-stretch: 80%; font-variant-numeric: tabular-nums; }
.big.up { color: var(--green-ink); }
.big.down { color: var(--pink-ink); }
.story .when { margin-top: auto; color: var(--ink-soft); font: 500 11px/1.5 var(--mono); }
.meter { height: 14px; border: 2px solid var(--ink); background: var(--paper); display: flex; }
.meter > div { min-width: 0; }
.meter .m-put { background: var(--pink); }
.meter .m-call { background: var(--green); border-left: 2px solid var(--ink); }
.meter .m-fill { background: var(--yellow); border-right: 2px solid var(--ink); }
.legend { display: flex; justify-content: space-between; gap: 8px; font: 600 11px/1.4 var(--mono); }

/* Closest to the edge */
.edge { padding-block: 8px 56px; }
.rows { margin: 0; padding: 0; list-style: none; border: 2px solid var(--ink); }
.row { display: grid; grid-template-columns: minmax(150px, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(200px, 2fr); gap: 8px 18px; align-items: center; padding: 13px 16px; border-top: 1px solid var(--rule); background: var(--paper); }
.row:first-child { border-top: 0; }
.row:nth-child(even) { background: var(--paper-deep); }
.row .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.row .coin { font: 800 20px/1 var(--display); font-stretch: 85%; }
.side { display: inline-block; border: 2px solid var(--ink); padding: 3px 7px; font: 700 10.5px/1 var(--mono); text-transform: uppercase; }
.side.long { background: var(--green); }
.side.short { background: var(--pink); }
.row .cell { min-width: 0; font: 600 15px/1.35 var(--text); font-variant-numeric: tabular-nums; }
.row .cell small { display: block; color: var(--ink-soft); font: 500 10.5px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }
.dist { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bar { flex: 1 1 auto; height: 12px; border: 2px solid var(--ink); background: var(--paper); }
.bar > div { height: 100%; background: var(--pink); }
.dist b { flex: none; width: 4.6em; text-align: right; font: 700 13px/1 var(--mono); }

/* How it works */
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; padding-block: 0 56px; }
.how h3 { margin: 0 0 6px; font: 800 20px/1.2 var(--display); font-stretch: 88%; }
.how p { margin: 0; font-size: 15.5px; color: var(--ink); }

/* Alerts */
.alerts-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 30px 52px; align-items: start; }
.alerts h2 { margin: 10px 0 12px; font: 800 clamp(34px, 4.4vw, 56px)/0.98 var(--display); font-stretch: 78%; letter-spacing: -0.015em; text-wrap: balance; }
.alerts p { margin: 0 0 12px; max-width: 34em; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.plan { min-width: 0; padding: 14px 14px 16px; border: 2px solid var(--ink); background: var(--paper); }
.plan.pick { box-shadow: 6px 6px 0 var(--ink); background: var(--pink-wash); }
.plan h3 { margin: 0 0 6px; font: 700 12px/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }
.plan .price { margin: 0; font: 800 38px/1 var(--display); font-stretch: 85%; }
.price small { font: 600 13px/1 var(--text); }
.plan p { margin: 6px 0 0; font-size: 14px; line-height: 1.45; }
.waitlist { display: grid; gap: 12px; padding: 16px; border: 2px solid var(--ink); background: var(--paper); }
.waitlist label { font-weight: 700; }
.field { display: flex; flex-wrap: wrap; gap: 8px; }
.field input[type="email"] { flex: 1 1 220px; min-width: 0; padding: 11px 12px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font: 16px var(--text); }
.waitlist fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.waitlist legend { padding: 0; margin-bottom: 6px; font-weight: 700; }
.waitlist .fine { margin: 0; color: var(--ink-soft); font-size: 13px; }
.form-status { margin: 0; font-weight: 700; }
.trap { position: absolute; left: -9999px; }

/* Footer */
.foot { background: var(--ink); color: var(--on-ink); padding-block: 36px 44px; font-size: 14px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px 40px; }
.foot-logo { font: 800 30px/0.9 var(--display); font-stretch: 75%; text-transform: uppercase; }
.foot p { margin: 0 0 10px; max-width: 60em; }
.foot a { color: var(--on-ink); }

/* Privacy and terms */
.mini-mast { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 18px; }
.mini-logo { display: inline-block; background: var(--pink); color: var(--ink); text-decoration: none; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); padding: 6px 12px 8px; font: 800 30px/0.9 var(--display); font-stretch: 75%; text-transform: uppercase; }
.legal { max-width: 46rem; padding-block: 36px 56px; }
.legal h1 { margin: 0 0 6px; font: 800 52px/1 var(--display); font-stretch: 80%; }
.legal h2 { margin: 30px 0 8px; font: 800 26px/1.1 var(--display); font-stretch: 85%; }
.legal p { margin: 0 0 14px; }
.legal .updated { color: var(--ink-soft); font: 500 12px/1.5 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }

/* Loading and errors */
.loading { display: grid; gap: 12px; }
.progress { height: 14px; border: 2px solid var(--ink); background: var(--paper); }
.progress > div { height: 100%; width: 0; background: var(--pink); }
.band-blue .progress { border-color: var(--on-blue); }
.skel { height: 22px; background: var(--paper-deep); }
.skel.tall { height: 120px; }
.note { margin: 0; padding: 12px 14px; border: 2px solid var(--ink); background: var(--yellow-wash); color: var(--ink); }

@media (max-width: 1000px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .row .dist { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .lead, .score-grid, .alerts-grid, .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .lead { gap: 30px; padding-block: 28px 40px; }
  .how { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .logo a { font-size: 50px; box-shadow: 5px 5px 0 var(--ink); }
  .sticker { width: 50px; height: 50px; top: -20px; right: -26px; font-size: 10px; }
  .mast-tag { font-size: 25px; }
  .deck { font-size: 18px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact dd { font-size: 23px; }
  .grid, .plans { grid-template-columns: minmax(0, 1fr); }
  .score-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stat b { font-size: 30px; }
  .split { height: 56px; }
  .split > div { font-size: 18px; padding: 0 8px; }
  .chart-card { box-shadow: 6px 6px 0 var(--pink); padding: 14px 12px 12px; }
  .row { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .dot { animation: none; }
  .btn:hover, a.chip:hover { transform: none; }
}