/* ==========================================================================
   Redix Digital: the blog (blog.html at /blog/, and a page for every article)
   In the design of the legal pages: a home page title, a bold half and a light
   half, over the still sky (page.css). The index lays the articles out in the
   home page's own cards (v2.css, .read); an article is read on a pane of the
   home page form's dark glass, about 70 characters wide, with the other
   articles and the way to a conversation after it. tools/build-blog.js writes
   the pages.
   ========================================================================== */

/* --- The opening: the title of the page ------------------------------------------------ */

.blog {
  padding: 0 var(--pad) clamp(80px, 14vh, 160px);
}

.blog-head {
  padding: calc(76px + clamp(48px, 12vh, 132px)) 0 clamp(36px, 7vh, 72px);
}

/* Two lines, the bold one first: the grammar of the home page's section titles */
.blog-title { font-size: clamp(2.75rem, 6.4vw, 6.25rem); }

/* An article's title is a sentence, longer than a section's: smaller, so it keeps to three lines */
.post-title {
  max-width: 22ch;
  font-size: clamp(2.125rem, 4.4vw, 4.25rem);
  text-wrap: balance;
}

.blog-title span,
.post-title span { display: block; }

.blog-sub,
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  max-width: 60ch;
  margin: clamp(18px, 3vh, 28px) 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-mid);
}

.post-meta { font-size: 1rem; }

/* --- The articles, as cards ------------------------------------------------------------- */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-item { display: flex; }

/* --- An article ------------------------------------------------------------------------- */

/* The glass of the home page's form: the surface everything long is read on */
.post-doc {
  max-width: 860px;
  padding: clamp(20px, 4.6vw, 64px);
  border-radius: 24px;
  background: linear-gradient(158deg, rgba(28, 40, 82, 0.9) 0%, rgba(13, 20, 44, 0.94) 62%, rgba(9, 14, 33, 0.96) 100%);
  box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 44px 90px -44px rgba(0, 0, 0, 0.75);
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--text-mid);
  text-shadow: none;
  overflow-wrap: break-word;
}

.post-doc > * { margin: 0; }
.post-doc > * + * { margin-top: 18px; }

/* The article's own picture, at the head of the pane */
.post-pic {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 15px;
  background: #0b1022;
}

.post-doc > .post-pic + * { margin-top: clamp(28px, 4vh, 40px); }

.post-doc h2 {
  margin-top: clamp(40px, 6vh, 56px);
  padding-top: clamp(28px, 4vh, 40px);
  border-top: 1px solid var(--line);
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}

.post-doc h3 {
  margin-top: clamp(26px, 4vh, 34px);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.post-doc h2 + *,
.post-doc h3 + * { margin-top: 12px; }

.post-doc strong {
  font-weight: 700;
  color: var(--text);
}

/* A numbered list: the numbers in the light of the page */
.post-doc ol {
  display: grid;
  gap: 10px;
  padding-inline-start: 1.6em;
}

.post-doc ol li { padding-inline-start: 6px; }

.post-doc ol li::marker {
  font-weight: 700;
  color: var(--cyan-hi);
}

/* The banner inside the article: the page of the site that answers what the article raised.
   A pane within the pane, lit at its edge in the light of the page. */
.post-doc .post-ad {
  display: grid;
  justify-items: start;
  gap: 10px;
  margin-block: clamp(36px, 5vh, 48px);
  padding: clamp(22px, 3vw, 32px);
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(0, 196, 204, 0.2) 0%, rgba(0, 196, 204, 0) 60%),
    rgba(7, 11, 26, 0.55);
  box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.32);
}

.post-ad > * { margin: 0; }

.post-ad-title {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 800;
  line-height: 1.3;
  color: var(--text);
  text-wrap: balance;
}

.post-ad-text {
  max-width: 52ch;
  font-size: 1rem;
  line-height: 1.65;
}

.post-ad .btn { margin-top: 8px; }

/* The end of the article, inside the pane: sending it on, then the article before it and after it */
.post-doc > .post-end {
  display: grid;
  gap: clamp(28px, 4vh, 40px);
  margin-top: clamp(40px, 6vh, 56px);
  padding-top: clamp(28px, 4vh, 40px);
  border-top: 1px solid var(--line);
}

.post-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.post-share-title {
  margin: 0;
  margin-inline-end: 10px;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text);
}

.post-share-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A round button for each network, and a pill for copying: the inner pane's glass and line */
.post-share-list a,
.post-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 46px;
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: rgba(7, 11, 26, 0.55);
  box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.26);
  color: var(--text);
  text-decoration: none;
  transition: color 180ms ease, box-shadow 180ms ease;
}

.post-share-btn {
  padding: 0 18px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.post-share-list svg,
.post-share-btn svg {
  flex: none;
  width: 20px;
  height: 20px;
}

.post-share-btn svg { width: 18px; height: 18px; }

/* Copied: the pill says so for a moment, in the light of the page */
.post-share-btn.is-done {
  color: var(--cyan-hi);
  box-shadow: inset 0 0 0 1.5px var(--cyan-hi);
}

.post-share-btn[hidden] { display: none; }

/* The article before and after: two inner panes side by side, the older at the start (right) */
.post-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.post-step {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: clamp(18px, 2.4vw, 24px);
  border-radius: 18px;
  background: rgba(7, 11, 26, 0.55);
  box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.2);
  color: var(--text-mid);
  text-decoration: none;
  transition: box-shadow 180ms ease;
}

.post-step--prev { grid-column: 1; }
.post-step--next { grid-column: 2; }

.post-step-dir {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-low);
}

/* A chevron toward the side its article lies on: the right for the one before, the left for
   the one after. Physical borders, like the contents' chevron, so the direction holds. */
.post-step-dir::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--cyan-hi);
  border-right: 2px solid var(--cyan-hi);
  transform: rotate(45deg);
}

.post-step--next .post-step-dir::before { transform: rotate(-135deg); }

.post-step-title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text);
  text-wrap: balance;
}

/* At the far end (left), clear of the WhatsApp bubble that opens at the bottom right */
.post-all {
  grid-column: 1 / -1;
  justify-self: end;
}

@media (hover: hover) and (pointer: fine) {
  .post-share-list a:hover,
  .post-share-btn:hover {
    color: var(--cyan-hi);
    box-shadow: inset 0 0 0 1.5px var(--cyan-hi);
  }

  .post-step:hover { box-shadow: inset 0 0 0 1.5px rgba(125, 240, 244, 0.6); }
}

html.no-motion :is(.post-share-list a, .post-share-btn, .post-step) { transition: none; }

@media (max-width: 640px) {
  .post-share-title { flex-basis: 100%; margin: 0 0 2px; }
  .post-steps { grid-template-columns: minmax(0, 1fr); }
  .post-step--prev,
  .post-step--next { grid-column: 1; }
  .post-all { justify-self: start; }
}

/* The contents, on the phone and the tablet: folded under the title */
.post-toc-m {
  max-width: 860px;
  margin-top: clamp(22px, 3.4vh, 32px);
  border-radius: 16px;
  background: rgba(7, 11, 26, 0.55);
  box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.2);
}

.post-toc-m summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 18px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.post-toc-m summary::-webkit-details-marker { display: none; }

/* A chevron that turns when the contents open: down when closed, up when open. Its borders are
   physical on purpose, so the page's direction (RTL) does not turn it sideways. */
.post-toc-m summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--cyan-hi);
  border-bottom: 2px solid var(--cyan-hi);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 200ms var(--ease-out-strong);
}

.post-toc-m[open] summary::after { transform: translateY(2px) rotate(-135deg); }

.post-toc-m nav { padding: 0 18px 16px; }

/* The contents' links, in both places */
.post-toc ol,
.post-toc-m ol {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.post-toc a,
.post-toc-m a {
  display: block;
  padding: 8px 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text-mid);
  text-decoration: none;
}

.post-toc-m a { padding: 10px 0; border-top: 1px solid var(--line); }

/* Beside the article: the contents stay in view, and the line beside them fills as the article
   is read; the section being read is lit (post.js). The rail is as tall as the article, so the
   contents travel with the reader and stop where the short form begins. */
.post-toc-rail { display: none; }

.post-toc {
  position: sticky;
  top: 100px;
  padding-inline-start: 20px;
}

.post-toc-title {
  margin: 0 0 10px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-low);
}

.post-toc a {
  position: relative;
  transition: color 180ms ease;
}

.post-toc a[aria-current] {
  font-weight: 700;
  color: var(--text);
}

/* The point of light beside the section being read, on the line */
.post-toc a[aria-current]::before {
  content: "";
  position: absolute;
  top: calc(8px + 0.725em - 4px);
  inset-inline-start: -24px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan-hi);
  box-shadow: 0 0 10px rgba(125, 240, 244, 0.8);
}

.post-toc-line {
  position: absolute;
  top: 30px;
  bottom: 0;
  inset-inline-start: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}

.post-toc-line i {
  display: block;
  height: 100%;
  background: linear-gradient(to bottom, var(--cyan), var(--cyan-hi));
  transform: scaleY(var(--read, 0));
  transform-origin: top;
  transition: transform 160ms linear;
}

html.no-motion .post-toc-line i { transition: none; }

@media (hover: hover) and (pointer: fine) {
  .post-toc a:hover,
  .post-toc-m a:hover { color: var(--text); }
}

/* The short form: after the article on small screens, at the foot of the column beside it on wide ones */
.post-side { margin-top: clamp(36px, 6vh, 56px); }

.post-ask {
  max-width: 860px;
  padding: clamp(22px, 2.8vw, 32px) 0 0;
}

.post-ask-title {
  margin: 0;
  padding: 0 clamp(22px, 2.8vw, 32px);
  font-size: clamp(1.375rem, 2vw, 1.625rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--text);
}

.post-ask-sub {
  margin: 6px 0 0;
  padding: 0 clamp(22px, 2.8vw, 32px);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-mid);
}

.post-ask .form { padding: 20px clamp(22px, 2.8vw, 32px) clamp(22px, 2.8vw, 32px); }

/* The article and all that follows it stand on one axis, in the middle of the page, so the room
   left over is shared by both sides. --post-w is the width of the article with its columns;
   --more-w the width of the other articles, as wide as their cards (one or two of them take the
   width those cards have in a row of three). */
.post { --post-w: 860px; --more-w: var(--post-w); }

.post > * {
  max-width: var(--post-w);
  margin-inline: auto;
}

.post > .post-more,
.post > .blog-end { max-width: var(--more-w); }

@media (min-width: 1100px) {
  .post:has(.post-more .blog-item:nth-child(2):last-child) { --more-w: calc((var(--post-w) - 36px) * 2 / 3 + 18px); }
  .post:has(.post-more .blog-item:only-child) { --more-w: calc((var(--post-w) - 36px) / 3); }
  .post-more .blog-grid:has(.blog-item:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-more .blog-grid:has(.blog-item:only-child) { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1100px) {
  .post { --post-w: calc(860px + clamp(36px, 4vw, 64px) + clamp(260px, 22vw, 300px)); }

  .post-body {
    display: grid;
    grid-template-columns: minmax(0, 860px) clamp(260px, 22vw, 300px);
    gap: clamp(36px, 4vw, 64px);
    align-items: stretch;
  }

  .post-side {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 0;
  }

  .post-toc-rail {
    display: block;
    flex: 1;
  }

  .post-toc-m { display: none; }

  .post-ask .agree label { font-size: 0.8125rem; }
}

/* Wide screens: three columns, the article in the middle. The contents on the side the reading
   starts from, the short form on the other, held in view as the article scrolls. */
@media (min-width: 1600px) {
  .post {
    --side: clamp(260px, 15vw, 280px);
    --gap: clamp(36px, 3vw, 56px);
    --post-w: calc(860px + 2 * var(--side) + 2 * var(--gap));
  }

  /* the head of the article spans the three columns, from the contents to the form (Roei,
     2026-10-21), its title free to use that width */
  .post .post-title { max-width: none; }

  .post-body {
    grid-template-columns: var(--side) minmax(0, 860px) var(--side);
    gap: var(--gap);
  }

  .post-side { display: contents; }

  .post-toc-rail { grid-column: 1; grid-row: 1; }
  .post-doc { grid-column: 2; grid-row: 1; }

  .post-ask {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    position: sticky;
    top: 100px;
  }
}

/* --- After the article: the others, and the way to a conversation --------------------------- */

.post-more {
  margin-top: clamp(64px, 12vh, 132px);
}

.post-more-title {
  margin: 0 0 clamp(24px, 5vh, 44px);
  font-size: clamp(2rem, 3.7vw, 3.875rem);
}

/* The cards of a row of three; one or two others keep that card width (--more-w, above) */
.post-more .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* The close of the portfolio (portfolio.css, .pf-end) */
.blog-end {
  display: grid;
  justify-items: start;
  gap: clamp(22px, 3.4vh, 34px);
  padding-top: clamp(60px, 12vh, 140px);
}

.blog-end-title { font-size: clamp(2.25rem, 5vw, 5rem); }

.blog-end-title span { display: block; }

/* --- Smaller screens --------------------------------------------------------------------- */

@media (max-width: 1099px) {
  .post-more .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 979px) {
  .blog-grid,
  .post-more .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .blog-head { padding-top: calc(64px + clamp(36px, 9vh, 72px)); }
  .post-doc { border-radius: 20px; }
  .post-pic { border-radius: 12px; }
}

@media (max-width: 640px) {
  .blog-grid,
  .post-more .blog-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- The colour modes of the accessibility menu, and the system's forced colours ---------------
   What was told apart by its glass is told apart by a line */

html:is(.a11y-contrast, .a11y-negative, .a11y-light) :is(.post-doc, .post-ad, .post-toc-m, .post-ask, .post-step, .post-share-list a, .post-share-btn) { outline: 1px solid currentColor; }

@media (forced-colors: active) {
  .post-doc,
  .post-doc .post-ad,
  .post-toc-m,
  .post-ask {
    border: 1px solid CanvasText;
    background: Canvas;
  }

  .post-step,
  .post-share-list a,
  .post-share-btn {
    border: 1px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }

  .post-step-dir::before { border-color: ButtonText; }

  .post-doc ol li::marker { color: CanvasText; }

  .post-toc-line { background: GrayText; }
  .post-toc-line i,
  .post-toc a[aria-current]::before { background: Highlight; }
}

/* English pages: the article before lies on the left and the one after on the right */
html[dir="ltr"] .post-step-dir::before { transform: rotate(-135deg); }
html[dir="ltr"] .post-step--next .post-step-dir::before { transform: rotate(45deg); }