/* ============================================================
   Content pages: /blog, /blog/:slug, /faq, /terms.
   Every rule here is prefixed ct-. This sheet loads after
   app.css, so a plain rule in here outranks a media query
   there. All of this file's own media queries sit at the
   bottom for the same reason.

   Surfaces stay translucent. The wireframe ground has to read
   through every one of these pages, so nothing below paints an
   opaque full-width background.
   ============================================================ */

/* The lime accent disappears on a light ground, so the accent role
   swaps to the primary there and only carries lime in dark. */
.ct-view {
  --ct-accent: var(--primary);
  padding-bottom: 96px;
}
:root.dark .ct-view { --ct-accent: var(--lime); }

/* ---------- shared page head ---------- */
.ct-head { padding: 52px 0 28px; text-align: center; }
.ct-head .eyebrow { margin: 0 0 13px; }
.ct-head-dek { max-width: 58ch; margin: 15px auto 0; font-size: 15px; line-height: 1.6; }
.ct-head-left { text-align: left; }
.ct-head-left .ct-head-dek { margin-inline: 0; }

/* ============================================================
   /blog index
   ============================================================ */
.ct-filter { display: flex; justify-content: center; margin: 0 0 26px; }
.ct-seg { flex-wrap: wrap; justify-content: center; gap: 6px; }

.ct-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 20px;
}
.ct-empty { grid-column: 1 / -1; }

.ct-card {
  display: flex; flex-direction: column;
  overflow: hidden;
  color: inherit;
  transition: transform .18s ease, border-color .18s ease;
}
.ct-card:hover { transform: translateY(-3px); border-color: var(--glass-hi); }
.ct-card-feature { grid-column: 1 / -1; }

.ct-cover {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid var(--glass-border);
  background: var(--glass-bg-faint);
}
.ct-cover svg { display: block; width: 100%; height: 100%; }

.ct-card-body {
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 18px 18px;
  min-width: 0;
}
.ct-meta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ct-cat { flex: none; }
.ct-read { font-size: 12px; }

.ct-card-title {
  margin: 0;
  font-size: 18px; font-weight: 700; line-height: 1.28;
  letter-spacing: -0.011em;
  text-wrap: balance;
}
.ct-dek { margin: 0; font-size: 13.5px; line-height: 1.58; }

.ct-byline {
  margin-top: auto; padding-top: 4px;
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; min-width: 0;
}
.ct-avatar {
  width: 22px; height: 22px; border-radius: 999px; flex: none;
  background: linear-gradient(148deg,
    hsl(var(--ct-h, 270) 88% 62%),
    hsl(calc(var(--ct-h, 270) + 42) 76% 42%));
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.ct-author { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-sep { width: 3px; height: 3px; border-radius: 999px; background: var(--border); flex: none; }

.ct-more {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 4px; font-size: 13px; font-weight: 700;
  color: var(--ct-accent);
}
.ct-more-ico { display: inline-flex; transition: transform .18s ease; }
.ct-card:hover .ct-more-ico, .ct-missing a:hover .ct-more-ico { transform: translateX(3px); }

/* ============================================================
   /blog/:slug
   ============================================================ */
.ct-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 30px 0 16px;
  font-size: 13px; font-weight: 600; color: var(--muted-fg);
}
.ct-back:hover { color: var(--fg); }
.ct-back-ico { display: inline-flex; transform: rotate(180deg); }

.ct-article { overflow: hidden; padding-bottom: 42px; }

/* The head shares the prose measure so the title, the dek, the byline and the
   body all hang off one left edge. */
.ct-art-head {
  max-width: 68ch;
  margin-inline: auto;
  padding: 34px clamp(18px, 5vw, 24px) 26px;
}
.ct-art-title { margin: 14px 0 0; text-wrap: balance; }
.ct-art-dek {
  margin: 15px 0 18px;
  max-width: 58ch;
  font-size: clamp(17px, 2.2vw, 21px); line-height: 1.45;
  color: var(--muted-fg);
}

.ct-art-cover {
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
}
.ct-art-cover svg { display: block; width: 100%; height: 100%; }

/* ---------- prose scale, 68ch measure ---------- */
.ct-prose {
  max-width: 68ch;
  margin: 0 auto;
  padding: 34px clamp(18px, 5vw, 24px) 0;
  font-size: 16.5px; line-height: 1.72;
  overflow-wrap: break-word;
}
.ct-prose > *:last-child { margin-bottom: 0; }

.ct-p { margin: 0 0 1.15em; }

.ct-h2 {
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: .022em;
  font-size: clamp(20px, 2.5vw, 25px); line-height: 1.06;
  margin: 2em 0 .72em;
}
.ct-h2::before {
  content: ''; display: block;
  width: 32px; height: 2px; margin-bottom: 15px;
  border-radius: 2px; background: var(--ct-accent); opacity: .85;
}
.ct-prose > .ct-h2:first-child { margin-top: 0; }

.ct-ul { margin: 0 0 1.3em; padding: 0; list-style: none; display: grid; gap: .55em; }
.ct-ul li { position: relative; padding-left: 25px; }
.ct-ul li::before {
  content: ''; position: absolute; left: 5px; top: .66em;
  width: 6px; height: 6px; border-radius: 2px;
  background: var(--ct-accent); opacity: .85;
  transform: rotate(45deg);
}

.ct-quote {
  margin: 1.9em 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--ct-accent);
  font-size: clamp(20px, 2.6vw, 26px); line-height: 1.34;
  color: var(--fg);
}

.ct-callout {
  display: flex; gap: 13px; align-items: flex-start;
  margin: 1.8em 0; padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--glass-bg-faint);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.ct-callout p { margin: 0; font-size: 15px; line-height: 1.6; }
.ct-callout-ico { display: inline-flex; flex: none; margin-top: 2px; color: var(--ct-accent); }

/* ---------- prev / next ---------- */
.ct-neighbours {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; margin-top: 22px;
}
.ct-neighbour {
  display: flex; flex-direction: column; gap: 5px;
  padding: 17px 20px; min-width: 0;
  transition: transform .18s ease, border-color .18s ease;
}
.ct-neighbour:hover { transform: translateY(-2px); border-color: var(--glass-hi); }
.ct-neighbour-title { font-size: 15px; font-weight: 700; line-height: 1.32; }
.ct-neighbour-meta { font-size: 12.5px; }
.ct-neighbour-blank { display: block; }

/* ---------- unknown slug ---------- */
.ct-missing {
  max-width: 600px; margin: 56px auto;
  padding: 46px 30px; text-align: center;
  display: grid; justify-items: center; gap: 12px;
}
.ct-missing p.muted { margin: 0; max-width: 46ch; font-size: 14.5px; }
.ct-missing .display { margin: 0; }

/* ============================================================
   /faq
   ============================================================ */
.ct-faq { max-width: 830px; margin: 0 auto; display: grid; gap: 30px; }
.ct-faq-group-title { margin: 0 0 11px; padding-left: 4px; }
.ct-faq-list { display: grid; gap: 10px; }
.ct-faq-item { overflow: hidden; }
.ct-faq-h { margin: 0; font-size: inherit; font-weight: inherit; }

.ct-faq-q {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 16px 20px;
  background: transparent; border: 0; border-radius: var(--radius-lg);
  text-align: left; cursor: pointer;
  font-size: 15.5px; font-weight: 600; line-height: 1.42;
  transition: background .15s ease;
}
.ct-faq-q:hover { background: var(--glass-bg-faint); }
/* .ct-faq-item clips, and the question button fills it edge to edge, so an
   outward focus ring is cut off. Draw it inside the button. */
.ct-faq-q:focus-visible { outline-offset: -3px; }
.ct-faq-q.open { background: var(--glass-bg-faint); }
.ct-faq-q-text { flex: 1 1 auto; min-width: 0; }
.ct-faq-chev { display: inline-flex; flex: none; color: var(--muted-fg); transition: transform .2s ease, color .2s ease; }
.ct-faq-q.open .ct-faq-chev { transform: rotate(180deg); color: var(--ct-accent); }

.ct-faq-a-inner {
  display: grid; gap: 11px;
  max-width: 68ch;
  padding: 2px 20px 18px;
  animation: ct-reveal .22s ease both;
}
.ct-faq-a p { margin: 0; font-size: 14.5px; line-height: 1.68; color: var(--muted-fg); }

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

.ct-faq-foot {
  max-width: 830px; margin: 28px auto 0;
  padding: 20px 22px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.ct-faq-foot-ico { display: inline-flex; flex: none; color: var(--ct-accent); }
.ct-faq-foot-title { margin: 0 0 2px; font-size: 15px; font-weight: 700; }
.ct-faq-foot p.muted { margin: 0; font-size: 13.5px; max-width: 52ch; }
.ct-faq-foot > a { margin-left: auto; }

/* ============================================================
   /terms
   ============================================================ */
.ct-updated { margin: 15px 0 0; font-size: 12px; letter-spacing: .03em; color: var(--muted-fg); }

.ct-notice {
  display: flex; align-items: flex-start; gap: 13px;
  margin: 4px 0 22px; padding: 17px 20px;
}
.ct-notice-ico { display: inline-flex; flex: none; margin-top: 1px; color: var(--ct-accent); }
.ct-notice p { margin: 0; max-width: 76ch; font-size: 14.5px; line-height: 1.6; }

.ct-terms { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 24px; }

.ct-toc { padding: 16px 14px; border-radius: var(--radius); margin-bottom: 28px; align-self: start; }
.ct-toc-title { margin: 0 0 8px; padding-left: 8px; }
.ct-toc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.ct-toc-link {
  display: flex; gap: 10px; align-items: baseline;
  padding: 6px 8px; border-radius: 8px;
  font-size: 13px; line-height: 1.4; color: var(--muted-fg);
  transition: color .15s ease, background .15s ease;
}
.ct-toc-link:hover { color: var(--fg); background: var(--glass-bg-faint); }
.ct-toc-num { flex: none; font-size: 11px; opacity: .65; }

.ct-terms-body { max-width: 68ch; font-size: 15px; line-height: 1.7; overflow-wrap: break-word; }
.ct-terms-body .ct-p { margin: 0 0 .95em; color: var(--muted-fg); }
.ct-terms-body .ct-p:last-child { margin-bottom: 0; }

.ct-section { scroll-margin-top: calc(var(--header-h) + 22px); }
/* The jump target takes focus so a keyboard reader continues from the heading.
   It is not interactive, so it should not draw a ring for a mouse jump. */
.ct-section:focus:not(:focus-visible) { outline: none; }
.ct-section + .ct-section {
  margin-top: 30px; padding-top: 30px;
  border-top: 1px solid var(--glass-border);
}
.ct-section-title {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0 0 12px;
  font-size: clamp(17px, 2vw, 20px); font-weight: 700; line-height: 1.28;
  text-wrap: balance;
}
.ct-section-num { flex: none; font-size: 12px; color: var(--ct-accent); }

/* ============================================================
   responsive. These sit last so they win inside this sheet.
   ============================================================ */
@media (min-width: 760px) {
  .ct-card-feature { flex-direction: row; align-items: stretch; }
  .ct-card-feature .ct-cover {
    flex: 0 0 50%; aspect-ratio: auto; min-height: 296px;
    border-bottom: 0; border-right: 1px solid var(--glass-border);
  }
  .ct-card-feature .ct-card-body { justify-content: center; gap: 13px; padding: 32px clamp(24px, 3vw, 40px); }
  .ct-card-feature .ct-card-title { font-size: clamp(23px, 2.7vw, 33px); line-height: 1.16; }
  .ct-card-feature .ct-dek { font-size: 15px; max-width: 48ch; }
}

@media (min-width: 900px) {
  .ct-terms { grid-template-columns: 244px minmax(0, 1fr); gap: 42px; padding: 34px; }
  .ct-toc { position: sticky; top: calc(var(--header-h) + 18px); margin-bottom: 0; }
}

@media (max-width: 640px) {
  .ct-head { padding-top: 38px; }
  .ct-neighbours { grid-template-columns: minmax(0, 1fr); }
  .ct-neighbour-blank { display: none; }
  .ct-art-cover { aspect-ratio: 16 / 10; }
  .ct-faq-foot > a { margin-left: 0; width: 100%; }
  .ct-prose { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-card, .ct-neighbour, .ct-more-ico, .ct-faq-chev { transition: none; }
  .ct-card:hover, .ct-neighbour:hover { transform: none; }
  .ct-card:hover .ct-more-ico, .ct-missing a:hover .ct-more-ico { transform: none; }
  .ct-faq-a-inner { animation: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .ct-callout, .ct-faq-q:hover, .ct-faq-q.open, .ct-toc-link:hover { background: var(--muted); }
  .ct-cover { background: var(--muted); }
}