a.contact_link {
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  font-family: "Matter SemiMono", monospace;
  font-size:13px;
  line-height:1;
  color:var(--hard-grey);
  background-color:var(--paper);
  border:1px solid var(--gridline);
  border-radius:20px;
  padding:6px 13px;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

a.contact_link:hover {
  color:var(--soft-black);
  background-color:var(--gentle-grey);
  border-color:#cfc9c9;
}

.featured_ideas_banner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:20px 20px 0;
  padding:22px;
  border:1px solid var(--gridline);
  border-radius:12px;
  background-color:var(--gentle-white);
  color:var(--soft-grey);
  text-decoration:none;
  transition:color 150ms ease, box-shadow 450ms ease, transform 450ms ease;
  font-family: "Inter";
}

.featured_ideas_banner:hover {
  color:var(--hard-grey);
  box-shadow:var(--box-shadow-combined);
  transform:scale(1.005);
  transition: box-shadow 150ms ease, transform 150ms ease;
}

.featured_ideas_banner.new_ideas {
  background-color:var(--magic);
  color:var(--paper);
  box-shadow:var(--box-shadow-combined);
}
.featured_ideas_banner.new_ideas:hover {
  color:var(--paper);
}

.featured_ideas_banner:hover .featured_ideas_banner_icon {
  width:51px;
}

.featured_ideas_banner_left {
  display:flex;
  align-items:center;
  gap:16px;
}

.featured_ideas_banner_bird {
  width:20px;
  height:auto;
}

.featured_ideas_banner_icon_wrapper {
  border-radius:8px;
  border:1px solid var(--gridline);
  width:44px;
  height:44px;
  overflow:hidden;
}

.featured_ideas_banner_icon {
  width:48px;
  height:auto;
  flex-shrink:0;
  transition:width 150ms;
}

.featured_ideas_banner_text strong {
  font-weight:700;
}

.featured_ideas_banner_arrow {
  width:18px;
  height:18px;
  flex-shrink:0;
}

@media (min-width:900px) {
  .featured_ideas_banner {
    margin:32px;
  }
}

.featured_idea_source {
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--gridline);
}

.featured_idea_source_label {
  font-weight:600;
  margin-right:6px;
}

.idea_type_label {
  display:inline-block;
  align-self:flex-start;
  font-size:12px;
  font-family: "Matter SemiMono", monospace;
  text-transform: capitalize;
  padding:4px 9px;
  border-radius:12px;
  margin-bottom:22px;
  color:var(--hard-grey);
  border:1px solid var(--gridline);
}

a.table_row .idea_type_label {
  font-size:11px;
  margin-bottom:12px;
}

.featured_idea_source_summary {
  margin:8px 0 0;
  color:var(--hard-grey);
  font-size:14px;
}

.ideas_table .table_row_summary {
  margin-bottom:12px;
}

.ideas_section_heading {
  margin:16px 0 8px;
  padding-left:10px;
  font-family: "Matter SemiMono", monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--soft-grey);
}

.ideas_section_heading:first-child {
  margin-top:0;
}

@media (min-width:900px) {
  .featured_ideas_intro {
    padding:24px 42px 0;
  }
}

svg.contact_icon {
  width:20px;
  height:auto;
}

.block.block_journalists .block_prediction.block_journalist:nth-child(even) {
  background-color:var(--gentle-grey);
}

.journalist_header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.block_journalist .journalist_header .title {
  margin-bottom:0;
  padding-bottom:0;
}

.block_journalist .description {
  padding:0;
  font-size:18px;
  color:var(--hard-grey);
  text-wrap:pretty;
}

.block_journalist .rationale {
  padding:0;
  margin-top:8px;
  font-size:15px;
  color:var(--soft-grey);
  text-wrap:pretty;
}

.block_journalist .contact_links {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
  padding:0;
}

.block_journalist .contact_links:empty {
  display:none;
  margin-top:0;
}

.journalist_recent_articles_wrapper {
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--gridline);
}

.journalist_recent_articles_label {
  display:block;
  margin-bottom:8px;
  font-family: "Matter SemiMono", monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--soft-grey);
}

ul.journalist_recent_articles {
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0;
  padding:0;
}

ul.journalist_recent_articles li {
  list-style-type:none;
}

ul.journalist_recent_articles li a {
  display:block;
  overflow:hidden;
  max-width:100%;
  color:var(--hard-grey);
  font-size:13px;
  text-decoration:none;
  text-overflow:ellipsis;
  white-space:nowrap;
}

ul.journalist_recent_articles li a:hover {
  color:var(--soft-black);
  text-decoration:underline;
}

.tracking_status_banner {
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows 280ms ease, opacity 220ms ease;
}

.tracking_status_banner.open {
  grid-template-rows:1fr;
  opacity:1;
}

.tracking_status_banner_inner {
  overflow:hidden;
  min-height:0;
  font-family: "Matter SemiMono", monospace;
  font-size:14px;
  text-align: center;
  border-bottom:1px solid var(--gridline);
  background-color:var(--dark-peach);
  transform:translateY(-6px);
  transition:transform 280ms ease, padding 280ms ease;
}

.tracking_status_banner.open .tracking_status_banner_inner {
  transform:translateY(0);
  padding:20px 0;
}

@media (prefers-reduced-motion:reduce) {
  .tracking_status_banner,
  .tracking_status_banner_inner {
    transition:none;
  }
}

.banner_draft_link {
  margin-bottom:0;
  padding:0;
  border:0;
  background:none;
  font-family:inherit;
  font-size:inherit;
  color:inherit;
  text-decoration:underline;
  cursor:pointer;
  color:var(--hard-grey);
}

.banner_draft_link:hover {
  opacity:0.7;
}

@media (min-width:900px) {
  .idea .article_headline {
    padding:38px 52px;
  }
  .idea .article_headline h1 {
    font-size:28px;
  }
}

.paper.idea {
  border-radius:16px;
}

.idea .insight_type_bar {
  background-color:var(--subtle-white);
}

.idea .idea_summary {
  background-color:var(--subtle-white);
  padding:40px 52px;
  border-bottom:1px solid var(--gridline);
  font-family: "Matter SemiMono", monospace;
  font-size:15px;
  color:var(--hard-grey);
}

.idea_summary_inner {
  display:block;
  max-width:700px;
  position: relative;
  margin:auto;
}

.idea_summary_inner span.label {
  font-family: "Ivar";
  font-weight:bold;
  display:block;
  margin-bottom:20px;
  font-size:26px;
  color:var(--soft-black);
}

.status_toggle {
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:0;
  line-height:inherit;
  border:1px solid var(--gridline);
  border-radius:16px;
  padding:7px 13px;
  font-size:14px;
  font-family: "Matter SemiMono", monospace;
  color:#777070;
  background:var(--paper);
  white-space:nowrap;
  cursor:pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.status_tabs {
  display:inline-flex;
  align-items:center;
  border:1px solid var(--gridline);
  border-radius:26px;
  overflow:hidden;
  background:var(--subtle-white);
  padding:4px;
  gap:2px;
  position:relative;
}

.status_tab {
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:0;
  padding:2px 11px;
  font-size:12px;
  font-family: "Matter SemiMono", monospace;
  color:var(--soft-grey);
  background:transparent;
  white-space:nowrap;
  cursor:pointer;
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
  border-radius:26px;
  line-height:27px;
  border:1px solid transparent;
}

.status_tab:hover {
  color:#777070;
  border:1px solid transparent;
}

.status_tab:active {
  transform:scale(0.95);
}

.status_tab.active {
  background-color:var(--paper);
  border:1px solid var(--gridline);
  z-index:2;
}

.status_toggle_dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--magic);
  opacity:0.25;
}

.status_tab.active .status_toggle_dot {
  background:var(--magic);
  animation:status_dot_pulse 2s ease-in-out infinite;
}

@keyframes status_dot_pulse {
  0%, 100% {
    opacity:0.25;
    box-shadow:0 0 0 0 transparent;
  }
  50% {
    opacity:1;
    box-shadow:0 0 6px 1px var(--magic);
  }
}

@media (prefers-reduced-motion:reduce) {
  .status_toggle_dot {
    animation:none;
  }
}

.idea_status {
  position:relative;
}

.confetti_particle {
  position:absolute;
  pointer-events:none;
  z-index:1;
}

.status_set_draft {
  margin-bottom:0;
  padding:0;
  border:0;
  background:none;
  font-size:13px;
  color:var(--soft-grey);
  text-decoration:underline;
  cursor:pointer;
  font-family: "Matter SemiMono", monospace;
}

.status_set_draft:hover {
  color:#777070;
}

.relevant_articles, .similar_campaigns, .upcoming_events {
  background-color:var(--shaded-white);
  border:1px solid var(--gridline);
  padding:24px;
  border-radius:16px;
}

.relevant_articles a {
  text-decoration:none;
}

.ideas_link {
  background-color:#ffffff69;
  border:1px solid var(--gridline);
  border-radius:16px;
  padding:17px;
  margin-bottom:17px;
  font-family: "Matter SemiMono", monospace;
}

.ideas_link:last-child {
  margin-bottom:0;
}

.ideas_link .headline {
  font-family: "Inter";
  font-size:16px;
  color:var(--soft-black);
  text-decoration:none;
  font-weight:bold;
}

.ideas_link .snippet {
  font-size:14px;
  color:var(--soft-grey);
}

.ideas_link .event_date {
  font-family: "Matter SemiMono", monospace;
  font-size:13px;
  color:var(--soft-grey);
}

img.source_favicon.small {
  height:20px;
  width:20px;
}

.journalists_wrapper { 
  margin-bottom:0;
}

.journalists_reveal {
  display:grid;
  grid-template-rows:0fr;
  transition: grid-template-rows 400ms ease;
}

.journalists_reveal_inner {
  overflow:hidden;
  opacity:0;
  transition: opacity 300ms ease;
}

.journalists_reveal.is-revealed {
  grid-template-rows:1fr;
}

.journalists_reveal.is-revealed .journalists_reveal_inner {
  opacity:1;
}

.journalists_reveal.reveal_complete .journalists_reveal_inner {
  overflow:visible;
}

@media (prefers-reduced-motion:reduce) {
  .journalists_reveal,
  .journalists_reveal_inner {
    transition:none;
  }

  /* No transition means no transitionend, so reveal_complete never lands —
     unclip the block's shadow off is-revealed instead. */
  .journalists_reveal.is-revealed .journalists_reveal_inner {
    overflow:visible;
  }
}

.related_stories_wrapper {
  display:flex;
  flex-direction:column;
  gap:24px;
  margin:43px;
  margin-bottom:0;
}

.featured_ideas_wrapper {
  background-color:var(--gentle-white);
  padding:12px;
  border-radius:9xp;
  border:1px solid var(--gridline);
}

.featured_ideas_intro {
  text-align: center;
  margin-bottom:30px;
}

.featured_ideas_heading {
  margin-bottom:6px;
  font-size:32px;
}

.featured_ideas_subheading {
  margin:0;
  color:var(--hard-grey);
  font-size:16px;
  font-family:"Inter";
}

.paper.featured_idea span.summary {
  margin-bottom:32px;
}

.paper.featured_idea .feedback_wrapper {
  border-top:0;
}

.answer_block {
  background-color:#fdf5f5;
  border:1px solid #d3b6b8;
  border-radius:16px;
  transition:transform 150ms, background-color 320ms ease, border-color 320ms ease;
}

.answer_block.pending {
  display:none;
}

/* answer-sequence un-hides one block at a time; this is the block's entrance
   as it takes its turn, so the chain reads as things arriving rather than
   just popping in. It settles down from above, pushing the finished blocks
   below it. */
.answer_block.revealing {
  animation:answer_block_appear 260ms ease both;
}

@keyframes answer_block_appear {
  from {
    opacity:0;
    transform:translateY(-4px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

.answer_block.pressed {
  transform:scale(0.99);
}

.answer_block.complete {
  background-color:var(--deep-rose);
  border-color:var(--deep-rose);
}

.answer_block .upper {
  padding:24px;
  color:#826c6d;
  display:flex;
  gap:3px;
  align-items:center;
  transition:gap 150ms ease;
  min-height:29px; /* pins the row so the blob collapsing on .complete doesn't
                      shorten the whole block — the motion stays horizontal */
}

/* The blob morphs triangle -> dot -> circle. All three states share one 29x29
   box and only swap clip-path, because a border triangle (width/height 0) has
   no continuous path to a circle and aspect-ratio/height:auto don't animate.
   Each polygon is 24 vertices sampled at the same 24 angles from the box
   centre, so vertex k maps to vertex k and the shape morphs without twisting.
   Generated by scripting the ray/edge intersections — see the plan. */
.answer_block .blob {
  position:relative;
  isolation:isolate; /* shader canvas mounts at z-index -1; without a stacking
                        context it hides behind our own background-color */
  flex:none;
  width:29px;
  height:29px;
  background-color:#826c6d;
  clip-path:polygon(72.41% 50%, 65.61% 54.18%, 61.56% 56.68%, 58.54% 58.54%, 55.88% 60.18%, 53.17% 61.84%, 50% 63.79%, 45.57% 66.52%, 37.65% 71.39%, 27.59% 72.41%, 27.59% 62.94%, 27.59% 56.01%, 27.59% 50%, 27.59% 43.99%, 27.59% 37.06%, 27.59% 27.59%, 37.65% 28.61%, 45.57% 33.48%, 50% 36.21%, 53.17% 38.16%, 55.88% 39.82%, 58.54% 41.46%, 61.56% 43.32%, 65.61% 45.82%);
  transition:clip-path 220ms ease, transform 220ms ease;
}

.answer_block.pressed .blob {
  clip-path:polygon(75.86% 50%, 74.98% 56.69%, 72.4% 62.93%, 68.29% 68.29%, 62.93% 72.4%, 56.69% 74.98%, 50% 75.86%, 43.31% 74.98%, 37.07% 72.4%, 31.71% 68.29%, 27.6% 62.93%, 25.02% 56.69%, 24.14% 50%, 25.02% 43.31%, 27.6% 37.07%, 31.71% 31.71%, 37.07% 27.6%, 43.31% 25.02%, 50% 24.14%, 56.69% 25.02%, 62.93% 27.6%, 68.29% 31.71%, 72.4% 37.07%, 74.98% 43.31%);
  transform: scale(0.8);
}

.answer_block.thinking .upper {
  gap:12px;
}

.answer_block.thinking .blob {
  clip-path:polygon(100% 50%, 98.3% 62.94%, 93.3% 75%, 85.36% 85.36%, 75% 93.3%, 62.94% 98.3%, 50% 100%, 37.06% 98.3%, 25% 93.3%, 14.64% 85.36%, 6.7% 75%, 1.7% 62.94%, 0% 50%, 1.7% 37.06%, 6.7% 25%, 14.64% 14.64%, 25% 6.7%, 37.06% 1.7%, 50% 0%, 62.94% 1.7%, 75% 6.7%, 85.36% 14.64%, 93.3% 25%, 98.3% 37.06%);
  transition:clip-path 380ms cubic-bezier(.34, 1.5, .64, 1);
}

/* Complete layers on top of .thinking (source order decides — both are 0,2,0),
   so it keeps that circle clip-path and just collapses the box. Width and
   height go together to keep the box square, or the circle would squash into
   an ellipse on the way out. The negative margin eats .upper's gap so the
   label lands flush where the blob's left edge was. Transition is re-declared
   because .thinking's shorthand wiped the base rule's list. */
.answer_block.complete .blob {
  width:0;
  height:0;
  margin-right:-12px;
  opacity:0;
  transition:width 320ms cubic-bezier(.4, 0, .2, 1),
             height 320ms cubic-bezier(.4, 0, .2, 1),
             margin-right 320ms cubic-bezier(.4, 0, .2, 1),
             opacity 200ms ease;
}

.answer_block .label {
  display:grid;
  font-family: "Matter SemiMono", monospace;
  font-size:14px;
}

/* Both labels stack in one grid cell so the block sizes to the longer string
   and nothing reflows mid-fade. */
.answer_block .label > * {
  grid-area:1 / 1;
  transition:opacity 200ms ease, color 320ms ease;
}

.answer_block .label .busy,
.answer_block .label .done {
  opacity:0;
}

/* Content is always present (not injected only while thinking) so the grid
   cell reserves its width up front and the label never reflows when
   thinking starts. */
.answer_block .label .busy::after {
  content:"...";
  display:inline-block;
}

/* Steps through none/one/two/three dots by sliding a clip-path over the
   ::after box. The stops land on exact thirds of the pseudo-element's own
   box, so the clip always falls on a dot boundary regardless of glyph
   widths — the label font is "Matter SemiMono", which isn't guaranteed
   truly monospaced, so ch units aren't safe here. */
.answer_block.thinking .label .busy::after {
  animation:answer_block_dots 1.6s steps(4, jump-none) infinite;
}

@keyframes answer_block_dots {
  from {
    clip-path:inset(0 100% 0 0);
  }
  to {
    clip-path:inset(0 0 0 0);
  }
}

.answer_block.thinking .label .idle {
  opacity:0;
}

.answer_block.thinking .label .busy {
  opacity:1;
}

.answer_block.complete .label .busy {
  opacity:0;
}

/* .complete layers on top of .thinking, so without this the dots would keep
   cycling forever behind a faded-out label — three infinite animations per
   page, and running from first paint on an already-processed idea. */
.answer_block.complete .label .busy::after {
  animation:none;
}

.answer_block.complete .label .done {
  opacity:1;
  color:var(--paper);
  font-family: "Ivar";
  font-size:19px;
}

.answer_block.interactive {
  cursor:pointer;
  user-select:none;
  touch-action:manipulation;
}

.answer_block.interactive.thinking {
  cursor:default;
}

.answer_block.interactive:focus-visible {
  outline:2px solid var(--soft-black);
  outline-offset:2px;
}

.answer_block .results {
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows 420ms cubic-bezier(.4, 0, .2, 1);
}

.answer_block .results_inner {
  overflow:hidden;
  min-height:0;   /* grid items floor at min-content without this, so the
                     collapsed row never actually reaches zero */
  opacity:0;
  transition:opacity 300ms ease 120ms;  /* trails the expansion so the panel
                                           fades in as the space appears */
}

.answer_block.complete .results { grid-template-rows:1fr; }
.answer_block.complete .results_inner { opacity:1; }
.answer_block.reveal_complete .results_inner { overflow:visible; }

.answer_block .results_panel {
  background-color:var(--paper);
  border-radius:0 0 15px 15px;
  padding:24px;
}

/* Each content partial leads with its own <h4>, which duplicates the .done
   label here. */
.answer_block .results_panel h4 { display:none; }

.answer_block .results_empty {
  margin:0;
  font-family:"Matter SemiMono", monospace;
  font-size:14px;
  color:var(--soft-grey);
}

@media (prefers-reduced-motion:reduce) {
  .answer_block .blob,
  .answer_block.thinking .blob,
  .answer_block.complete .blob,
  .answer_block .label > *,
  .answer_block .results,
  .answer_block .results_inner {
    transition:none;
  }

  /* The sequence still has to advance block by block — only the motion of
     arriving is cut. */
  .answer_block.revealing {
    animation:none;
  }

  /* No transition means no transitionend, so reveal_complete never lands —
     unclip the panel off .complete directly instead. */
  .answer_block.complete .results_inner {
    overflow:visible;
  }

  /* Removing the animation leaves clip-path unset, i.e. unclipped, so all
     three dots sit still and show instead of stepping through the cycle. */
  .answer_block.thinking .label .busy::after {
    animation:none;
  }
}