/* The pages rendered on the server (backend/internal/rates/site/*.html): the
   blog's list, one post, the community page and "not found". They share the
   home page's language (tokens.css, components.css): a white page, 1px lines,
   square corners, Geist with Geist Mono labels, the section label and the
   slash heading, the accent for links and selected states, black buttons.
   The header is the compact one (no dark band); a page starts with its head
   under the strip. */

/* === Frame === */
.page { padding-top: clamp(32px, 4.5vw, 64px); }
site-footer { margin-top: clamp(80px, 9vw, 136px); }
.dot { color: var(--color-text-decor); }

/* Page head: the label, then the big slash heading with the lead beside it
   (under it below 1024px) */
.page-head { display: grid; gap: clamp(24px, 3vw, 40px); }
.page-head-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--spacing-06) clamp(32px, 5vw, 96px);
}
.page-title {
  font-size: clamp(40px, 1.2rem + 3.6vw, 76px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.page-lead { max-width: 30rem; color: var(--color-text-secondary); font: var(--type-body-02); }
.page-section { margin-top: clamp(56px, 7vw, 96px); }
.page-section-first { margin-top: clamp(40px, 5vw, 72px); }
.page-section > .section-label, .page-section-head { margin-bottom: clamp(20px, 2.5vw, 32px); }
.page-section-head { display: flex; align-items: center; gap: var(--spacing-06); }
.page-section-head .section-label { flex: 1; min-width: 0; }

/* A link onwards in mono capitals with an arrow (All posts →) */
.more-link, .back-link {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  color: var(--color-text-primary);
  font: var(--type-mono-label);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--duration-fast-01) var(--ease-standard);
}
.more-link:hover, .back-link:hover { color: var(--color-accent); }
/* Text links without side padding: the focus ring goes just outside the
   letters, not through them */
.more-link:focus-visible, .back-link:focus-visible { outline-offset: 2px; }

/* === Post labels: the category with a small accent square, the meta line
   (date · reading time) in mono capitals === */
.post-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-primary);
  font: var(--type-mono-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}
.post-tag::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; background: var(--color-accent); }
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--color-text-helper);
  font: var(--type-mono-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}
/* The title's link covers its whole card; focus outlines the card. */
.post-link { color: inherit; text-decoration: none; }
.post-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.post-link:focus-visible { outline: none; }
.post-link:focus-visible::after { outline: 2px solid var(--color-focus); outline-offset: -2px; }

/* === The newest post: a dark tile on the band's grid, the title large and
   white, Read as a white button === */
.post-feature {
  --color-focus: var(--color-shell-focus);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(360px, 32vw, 480px);
  margin-top: clamp(40px, 5vw, 72px);
  padding: clamp(20px, 3vw, 40px);
  background-color: var(--color-shell);
  background-image:
    linear-gradient(to right, var(--color-shell-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-shell-grid) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: -1px -1px;
  color: var(--color-shell-text);
}
.post-feature-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-03) var(--spacing-06); }
.post-feature .post-tag { color: var(--color-shell-text); }
.post-feature .post-tag::before { background: var(--color-pixel-5); }
.post-feature .post-tag-plain { color: var(--color-shell-text-secondary); }
.post-feature .post-tag-plain::before { display: none; }
.post-feature .card-index { position: absolute; top: clamp(20px, 3vw, 40px); right: clamp(20px, 3vw, 40px); color: var(--color-shell-text-secondary); }
.post-feature .card-index::before { color: var(--color-shell-text-secondary); opacity: 0.6; }
.post-feature-title {
  max-width: 20em;
  margin-top: auto;
  padding-top: clamp(48px, 6vw, 96px);
  font-size: clamp(28px, 1rem + 2.4vw, 56px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
  transition: color var(--duration-fast-02) var(--ease-standard);
}
.post-feature-summary { max-width: 40rem; margin-top: var(--spacing-05); color: var(--color-shell-text-secondary); font: var(--type-body-02); }
.post-feature-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-05) var(--spacing-06); margin-top: clamp(24px, 3vw, 40px); }
.post-feature .post-meta { color: var(--color-shell-text-secondary); }
.post-feature .dot { color: var(--color-shell-text-secondary); }
/* Read: the black button turned white on the dark tile (its square black) */
.post-feature-more {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-07);
  min-width: 10rem;
  min-height: 48px;
  padding: 0 var(--spacing-05);
  background: var(--color-background);
  color: var(--color-text-primary);
  font: var(--type-mono-button);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  transition: background-color var(--duration-fast-01) var(--ease-standard), color var(--duration-fast-01) var(--ease-standard);
}
.post-feature-more::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.post-feature:hover .post-feature-title { color: var(--color-accent-on-dark-hover); }
.post-feature:hover .post-feature-more { background: var(--color-accent); color: var(--color-text-on-color); }
/* Its white focus ring sits inside the tile, with dark around it (at the
   edge it would only look like the white page) */
.post-feature .post-link:focus-visible::after { outline-offset: -6px; }

/* Boxes sharing their 1px lines (the cards, the channels): each box draws
   all four sides and overlaps the box before it and the one above by 1px,
   into the grid's 1px at the top and left. So a first row with fewer boxes
   than columns has no line hanging over the empty ones. */
.post-grid, .social-grid { padding: 1px 0 0 1px; }
.post-grid > li, .social-grid > li { margin: -1px 0 0 -1px; border: 1px solid var(--color-border-subtle); }

/* === Cards: posts in boxes sharing their 1px lines, three in a row. Each
   spans five shared rows (category, space, title, summary, date), so titles
   line up across a row. The index ("// 002") is counted here. === */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto minmax(var(--spacing-09), 1fr) auto auto auto;
  counter-reset: post;
}
/* After the newest post (001) the cards go on from 002 */
.post-feature + .page-section .post-grid { counter-reset: post 1; }
.post-card {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  counter-increment: post;
}
.post-card article {
  position: relative;
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  padding: var(--spacing-06);
  transition: background-color var(--duration-moderate-02) var(--ease-standard);
}
.post-card .post-tag { grid-row: 1; padding-right: 4.5rem; }
.post-card article::before {
  content: "//\00a0";
  content: "//\00a0" / "";
  position: absolute;
  top: var(--spacing-06);
  right: calc(var(--spacing-06) + 3ch);
  color: var(--color-text-decor);
  font: var(--type-mono-label);
  letter-spacing: var(--tracking-mono);
}
.post-card article::after {
  content: "0" counter(post, decimal-leading-zero);
  content: "0" counter(post, decimal-leading-zero) / "";
  position: absolute;
  top: var(--spacing-06);
  right: var(--spacing-06);
  color: var(--color-text-secondary);
  font: var(--type-mono-label);
  letter-spacing: var(--tracking-mono);
}
.post-card-title {
  grid-row: 3;
  font: 400 22px/28px var(--font-sans);
  letter-spacing: -0.02em;
  text-wrap: balance;
  transition: color var(--duration-fast-02) var(--ease-standard);
}
.post-card-summary { grid-row: 4; max-width: 34rem; margin-top: var(--spacing-04); color: var(--color-text-secondary); font: var(--type-body-01); }
.post-card .post-meta { grid-row: 5; margin-top: var(--spacing-06); }
.post-card article:hover { background: var(--color-layer-hover); }
.post-card article:hover .post-card-title { color: var(--color-accent); }

/* Nothing yet: the dotted panel with one mono line */
.page-empty, .social-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 168px;
  padding: var(--spacing-07) var(--spacing-06);
  border: 1px solid var(--color-border-subtle);
  background-color: var(--color-dots-panel);
  background-image: radial-gradient(circle at center, var(--color-dots-dot) 1px, transparent 1.5px);
  background-size: 12px 12px;
  background-position: 6px 6px;
  color: var(--color-accent);
  font: 400 clamp(14px, 0.6rem + 0.6vw, 18px)/1.4 var(--font-mono);
  letter-spacing: var(--tracking-mono);
  text-align: center;
  text-transform: uppercase;
}
.page-empty { margin-top: clamp(40px, 5vw, 72px); }

/* === One post: a narrow reading column (about 68 characters of its 17px
   text) in the middle of the page. In rem, not ch: Geist's "0" is wide,
   so 68ch held over 90 characters a line. === */
.post, .post-more, .post-back { width: 100%; max-width: 36rem; margin-inline: auto; font-size: 17px; }
.crumbs ol { display: flex; align-items: baseline; min-width: 0; color: var(--color-text-helper); font: var(--type-body-01); }
.crumbs li { flex-shrink: 0; }
.crumbs li + li { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs li + li::before { content: "/"; content: "/" / ""; margin: 0 0.6em; color: var(--color-text-decor); }
.crumbs a { color: var(--color-text-secondary); text-decoration: none; transition: color var(--duration-fast-01) var(--ease-standard); }
.crumbs a:hover { color: var(--color-accent); }
.crumbs a:focus-visible { outline-offset: 2px; }
.post-head { margin-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--color-border-subtle); }
.post-title {
  margin-top: var(--spacing-05);
  font-size: clamp(32px, 1rem + 2.4vw, 52px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.post-lead { margin-top: var(--spacing-06); color: var(--color-text-secondary); font: 400 20px/30px var(--font-sans); letter-spacing: -0.01em; }

/* The body (the Markdown renderer's HTML): paragraphs, ## and ### headings,
   lists, quotes, rules, links, bold, italic and code */
.prose { margin-top: clamp(32px, 4vw, 48px); color: var(--color-text-primary); font-size: 1em; line-height: 1.7; overflow-wrap: break-word; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
  margin-top: 2.1em;
  font-size: 1.65em;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.prose h2::before { content: "/\00a0"; content: "/\00a0" / ""; color: var(--color-text-decor); font-weight: 300; }
.prose h3 { margin-top: 1.8em; font-size: 1.2em; font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; }
.prose :is(h2, h3) + * { margin-top: 0.7em; }
/* One column that may shrink, so a long address or link in an item wraps
   as it does in a paragraph */
.prose ul, .prose ol { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.55em; }
.prose li { position: relative; padding-left: 1.75em; }
/* Bullets: the accent square of the buttons; numbers: 01, 02 in mono */
.prose ul > li::before { content: ""; position: absolute; top: calc(0.85em - 3px); left: 0.25em; width: 6px; height: 6px; background: var(--color-accent); }
.prose ol > li::before {
  content: counter(list-item, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-text-helper);
  font-family: var(--font-mono);
  font-size: 0.8em;
  line-height: 2.125;
}
.prose a { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--duration-fast-01) var(--ease-standard); }
.prose a:hover { color: var(--color-accent-hover); text-decoration-thickness: 2px; }
.prose a:focus-visible { outline-offset: 2px; }
/* Links to other sites open a new tab: a small ↗ after them */
.prose a[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-left: 0.25em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 6 10 8 22.59 8 6 24.59 7.41 26 24 9.41 24 22 26 22 26 6 10 6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.prose strong { font-weight: 600; }
.prose code {
  padding: 0.1em 0.35em;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-layer-hover);
  font-family: var(--font-mono);
  font-size: 0.86em;
  overflow-wrap: anywhere;
}
.prose blockquote { margin-inline: 0; margin-bottom: 0; padding: 0.15em 0 0.15em 1.25em; border-left: 2px solid var(--color-accent); color: var(--color-text-secondary); font-size: 1.1em; line-height: 1.6; }
.prose blockquote > * + * { margin-top: 0.8em; }
.prose hr { height: 1px; margin-block: 2.4em; border: 0; background: var(--color-border-subtle); }
.prose > :first-child { margin-top: 0; }

.post-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-02) var(--spacing-07);
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: var(--spacing-05);
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-text-helper);
  font: var(--type-mono-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}
.post-author { color: var(--color-text-primary); }

/* More posts: rows sharing their lines, the title first for screen readers,
   the category and date above it on screen, an arrow at the right */
.post-more { margin-top: clamp(64px, 8vw, 104px); }
.post-more .section-label { margin-bottom: var(--spacing-05); }
.post-list { border-top: 1px solid var(--color-border-subtle); }
.post-list li { border-bottom: 1px solid var(--color-border-subtle); }
.post-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "meta arrow" "title arrow";
  align-items: center;
  gap: var(--spacing-03) var(--spacing-06);
  padding: var(--spacing-05) 0;
  color: inherit;
  text-decoration: none;
}
/* No side padding: the focus ring goes outside, clear of the square */
.post-row:focus-visible { outline-offset: 4px; }
.post-row-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--color-text-helper); font: var(--type-mono-caption); letter-spacing: var(--tracking-mono); text-transform: uppercase; }
.post-row-title { grid-area: title; font: 400 20px/26px var(--font-sans); letter-spacing: -0.02em; transition: color var(--duration-fast-02) var(--ease-standard); }
.post-row-arrow { grid-area: arrow; color: var(--color-text-helper); transition: color var(--duration-fast-02) var(--ease-standard); }
.post-row:hover .post-row-title, .post-row:hover .post-row-arrow { color: var(--color-accent); }
.post-back { margin-top: var(--spacing-07); }

/* === Community: the official channels as boxes sharing their lines, as the
   home page's networks: the icon gray until hovered, the name, the handle in
   mono, ↗ in the corner (each opens a new tab) === */
.social-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.social-link {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-03);
  min-height: 152px;
  padding: var(--spacing-07) var(--spacing-04) var(--spacing-06);
  color: var(--color-text-secondary);
  font: 500 15px/20px var(--font-sans);
  letter-spacing: -0.02em;
  text-align: center;
  text-decoration: none;
  transition: color var(--duration-fast-02) var(--ease-standard), background-color var(--duration-moderate-02) var(--ease-standard);
}
.social-link::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10px;
  height: 10px;
  background: currentColor;
  color: var(--color-text-decor);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 6 10 8 22.59 8 6 24.59 7.41 26 24 9.41 24 22 26 22 26 6 10 6z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: color var(--duration-fast-02) var(--ease-standard);
}
.social-icon { width: 28px; height: 28px; margin-bottom: var(--spacing-02); color: var(--color-text-helper); transition: color var(--duration-fast-02) var(--ease-standard); }
.social-handle { max-width: 100%; color: var(--color-text-helper); font: var(--type-mono-caption); letter-spacing: var(--tracking-mono); overflow-wrap: anywhere; }
.social-link:hover, .social-link:focus-visible { color: var(--color-text-primary); }
.social-link:hover::after, .social-link:focus-visible::after { color: var(--color-text-primary); }
.social-link:hover .social-icon, .social-link:focus-visible .social-icon { color: var(--color-accent); }
.social-empty { min-height: 200px; }

/* What 2Pay never asks for: a gray box under the channels */
.notice {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
  gap: var(--spacing-03) var(--spacing-07);
  margin-top: var(--spacing-03);
  padding: var(--spacing-06);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-layer-hover);
}
.notice-title { color: var(--color-accent); font: var(--type-mono-caption); letter-spacing: var(--tracking-mono); text-transform: uppercase; padding-top: 4px; }
.notice-text { max-width: 44rem; color: var(--color-text-primary); font: var(--type-body-02); }

/* === Not found: "[ 404 ]" in light mono accent, the title, two buttons === */
.notfound { padding-top: clamp(48px, 8vw, 120px); }
.notfound-code {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: clamp(56px, 1rem + 6vw, 120px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.06em;
}
.notfound-code .bracket { font-weight: 200; }
.notfound-code .bracket:first-child { margin-right: 0.3em; }
.notfound-code .bracket:last-child { margin-left: 0.3em; }
.notfound .page-title { margin-top: clamp(24px, 3vw, 40px); }
.notfound .page-lead { margin-top: var(--spacing-05); }
.notfound-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-05); margin-top: var(--spacing-08); }

/* === Laptops and tablets === */
@media (max-width: 1279px) {
  .social-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .page-head-row { grid-template-columns: minmax(0, 1fr); }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .social-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* === Phones: one card a row, the channels two in a row, the notice's title
   over its text === */
@media (max-width: 639px) {
  .post-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto var(--spacing-07) auto auto auto; }
  .post-card-title { font-size: 20px; line-height: 26px; }
  .post-feature { min-height: 0; }
  .post-feature-foot { flex-direction: column; align-items: stretch; }
  .post, .post-more, .post-back { font-size: 16px; }
  /* The post's meta line in two: the category, then date · reading time (no
     "·" left hanging at the end of a line) */
  .post-head .post-meta .post-tag { flex-basis: 100%; }
  .post-head .post-meta .post-tag + .dot { display: none; }
  .post-lead { font-size: 18px; line-height: 27px; }
  .post-row-title { font-size: 18px; line-height: 24px; }
  .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .social-link { min-height: 128px; }
  .notice { grid-template-columns: minmax(0, 1fr); padding: var(--spacing-05); }
  .page-section-head { flex-wrap: wrap; gap: var(--spacing-03); }
  .page-section-head .section-label { flex-basis: 100%; }
  /* Two equal buttons; a smaller gap keeps the label off the right edge at 320px */
  .notfound-actions .btn { flex: 1 1 0; min-width: 0; gap: var(--spacing-04); }
}
@media (prefers-reduced-motion: reduce) {
  .post-feature-title, .post-feature-more, .post-card article, .post-card-title, .post-row-title, .post-row-arrow, .social-link, .social-link::after, .social-icon { transition: none; }
}