/* Writing space for ikonoworld.art/vision. Juno's design of 2026-11-07, built by Reno.
   Sits on top of the live Css/vision.css and Responsive/visionResponsive.css,
   unchanged. Every value below is taken from those two files unless noted.

   Tokens, with intent:
   --wr-ground  #04100d  the Vision page ground (vision.css :root --bg-color)
   --wr-mint    #00fab3  Vision pillar colour: headings, topic names, links, active chip
   --wr-ink     #1d0011  text on a mint fill (live .discover-button)
   --wr-white   #ffffff  all reading text, plain white (standing rule D-2026-10-08-01)
   --wr-glass   #14000c99 dark see-through fill behind chips (live .navbar)
   --wr-edge    the live 1px gradient frame, mint to magenta (.visionary-img-wrapper)
   --wr-glow    the live mint glow (box-shadow 1px 1px 5px #00fab399)
   --wr-rule    #123a30  hairline between the cards and the secondary band (live phone header band)
*/
:root {
  --wr-ground: #04100d;
  --wr-mint: #00fab3;
  --wr-ink: #1d0011;
  --wr-white: #ffffff;
  --wr-glass: #14000c99;
  --wr-edge: linear-gradient(214.78deg, #00fab3 15.46%, #e40087 138.62%);
  --wr-glow: 1px 1px 5px 0 #00fab399;
  --wr-rule: #123a30;
}

/* Space above and below comes from the neighbouring sections' own margins (vision.css). */

/* ---------- Section ---------- */
.wr-section { margin: 0 auto; padding: 0 24px 0; max-width: 1138px; scroll-margin-top: 96px; }
.wr-section .transformation-title { margin-bottom: 32px; }

/* ---------- Topic filters ---------- */
.wr-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 auto 48px; max-width: 1090px; list-style: none; }
.wr-chip {
  font-family: "Chillax"; font-size: 17px; font-weight: 500; line-height: 27px; letter-spacing: 1px;
  color: var(--wr-mint); padding: 8px 16px; border-radius: 16px; cursor: pointer;
  border: 1px solid #fff0;
  background-image: linear-gradient(#14000c, #14000c), linear-gradient(223.76deg, #4ed0ab 17.57%, #e40087 111.53%);
  background-origin: border-box; background-clip: padding-box, border-box;
  transition: background-image .3s ease, color .3s ease;
}
.wr-chip:hover { box-shadow: var(--wr-glow); }
.wr-chip[aria-pressed="true"] {
  background-image: linear-gradient(var(--wr-mint), var(--wr-mint)), linear-gradient(223.76deg, #4ed0ab 17.57%, #e40087 111.53%);
  color: var(--wr-ink); box-shadow: 0 0 8px #00fab399; cursor: default;
}
.wr-chip:focus-visible, .wr-card:focus-visible, .wr-more:focus-visible, .wr-sub button:focus-visible, .wr-sub input:focus-visible, .wr-social a:focus-visible {
  outline: 2px solid var(--wr-white); outline-offset: 3px;
}

/* ---------- Bookmarks ----------
   Her ruling of 2026-11-07: each article is a bookmark, like a link preview.
   Three things: thumbnail beside the text, title, one line of summary.
   Date and topic: a very quiet line (data-meta="quiet"), or none (data-meta="off"). */
.wr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; max-width: 1040px; margin: 0 auto; }
.wr-card {
  display: flex; align-items: center; gap: 20px; padding: 12px 20px 12px 12px; min-height: 144px; min-width: 0;
  text-decoration: none; color: var(--wr-white); border-radius: 20px;
  border: 1px solid #fff0;
  background-image: linear-gradient(var(--wr-ground), var(--wr-ground)), var(--wr-edge);
  background-origin: border-box; background-clip: padding-box, border-box;
  transition: box-shadow .3s ease;
}
.wr-card:hover { box-shadow: var(--wr-glow); }
.wr-card[hidden] { display: none; }
.wr-img { flex: 0 0 160px; width: 160px; height: 120px; object-fit: cover; border-radius: 12px; display: block; background: #0b1f1a; }
.wr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wr-title {
  font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: .5px; color: var(--wr-white); transition: color .3s ease;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wr-card:hover .wr-title { color: var(--wr-mint); }
.wr-teaser { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--wr-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Quiet: small and last, in the Vision mint, never a grey. */
.wr-meta { display: flex; gap: 10px; margin-top: 2px; font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: .5px; color: var(--wr-mint); white-space: nowrap; overflow: hidden; }
.wr-topic, .wr-date { color: inherit; }
.wr-section[data-meta="off"] .wr-meta { display: none; }

.wr-empty { text-align: center; color: var(--wr-white); font-size: 18px; line-height: 30px; padding: 24px 0 8px; }
.wr-empty[hidden] { display: none; }
.wr-morewrap { display: flex; justify-content: center; margin-top: 48px; }
.wr-more { font-family: "Chillax"; cursor: pointer; }
.wr-more[hidden] { display: none; }
/* Filters and "More articles" need the small script under the section. Without it every
   bookmark shows and the two controls stay out of the way. */
.wr-section:not(.wr-ready) .wr-filters, .wr-section:not(.wr-ready) .wr-morewrap { display: none; }

/* ---------- Secondary band: Substack sign-up and social links ---------- */
.wr-elsewhere {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 32px 48px; flex-wrap: wrap;
  margin-top: 72px; padding-top: 32px; border-top: 1px solid var(--wr-rule);
}
.wr-label { display: block; color: var(--wr-mint); font-size: 17px; line-height: 27px; font-weight: 500; letter-spacing: 1px; margin-bottom: 12px; }
.wr-sub form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.wr-sub input {
  height: 48px; width: 320px; max-width: 100%; padding: 0 20px; border-radius: 16px;
  border: 1px solid #fff0; color: var(--wr-white); font: 400 17px "Chillax"; letter-spacing: .5px;
  background-image: linear-gradient(var(--wr-ground), var(--wr-ground)), linear-gradient(4deg, #00fab3 27.46%, #e40087db 138.62%);
  background-origin: border-box; background-clip: padding-box, border-box; outline: none;
}
.wr-sub input::placeholder { color: var(--wr-white); font-size: 17px; line-height: normal; }
.wr-sub .discover-button { font-family: "Chillax"; font-size: 17px; line-height: 30px; padding: 8px 18px; }
.wr-fine { color: var(--wr-white); font-size: 14px; line-height: 22px; font-weight: 500; margin-top: 10px; letter-spacing: .3px; }
.wr-fine a { color: var(--wr-white); }
.wr-social { display: flex; align-items: center; gap: 8px; }
.wr-social .wr-label { margin: 0 8px 0 0; }
.wr-social a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; }
.wr-social a:hover { background: #00fab31a; }
.wr-social img, .wr-social svg { display: block; }

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  .wr-grid { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
}

/* ---------- Phone: lead card whole, the rest as compact rows ---------- */
@media (max-width: 600px) {
  .wr-section { padding: 0 16px; }
  .wr-filters { gap: 8px; margin-bottom: 32px; }
  .wr-chip { font-size: 15px; line-height: 24px; padding: 9px 14px; letter-spacing: .5px; }
  /* Phone: the thumbnail stays beside the text. */
  .wr-grid { gap: 12px; }
  .wr-card { gap: 14px; padding: 10px 14px 10px 10px; min-height: 0; border-radius: 16px; }
  .wr-img { flex-basis: 88px; width: 88px; height: 88px; border-radius: 10px; }
  .wr-body { gap: 4px; }
  .wr-title { font-size: 17px; line-height: 23px; }
  .wr-teaser { font-size: 15px; line-height: 22px; }
  .wr-meta { font-size: 13px; line-height: 18px; }
  .wr-morewrap { margin-top: 32px; }
  .wr-elsewhere { flex-direction: column; flex-wrap: nowrap; align-items: stretch; margin-top: 56px; }
  .wr-sub form { flex-wrap: nowrap; }
  .wr-sub input { width: auto; flex: 1; min-width: 0; }
}

/* Small phones (320 to 360): the quiet line may wrap rather than lose the date; the
   sign-up button drops under the field. */
@media (max-width: 360px) {
  .wr-meta { flex-wrap: wrap; white-space: normal; gap: 0 10px; }
  .wr-img { flex-basis: 76px; width: 76px; height: 76px; }
  .wr-sub form { flex-wrap: wrap; }
  .wr-sub input { flex: 1 1 100%; }
}