/* =============================================================
   Rooby: blog, legal and 404 pages.

   Loaded after /styles.css (the homepage's tokens, type, buttons, bar
   and footer), so these pages share the homepage's look. This file only
   adds what articles and legal text need. The pages used to carry their
   own <style> blocks; every rule they had is covered here, so a post's
   markup can stay exactly as it was written.
   ============================================================= */

/* Names the posts' inline style="" attributes still use. */
:root {
  --text: var(--ink);
  --text-light: var(--ink-2);
  --heading: var(--ink);
  --border: var(--line);
  --bg-alt: #fff;
  --accent: var(--red-ink);
  --primary: var(--night);
  --nav-height: var(--bar);
}

body { background: var(--paper); }

/* The bar is always on here, and sits in the flow rather than over it. */
.dock--page { position: sticky; top: 0; transform: none; }
.dock__login { font-size: var(--fs-small); font-weight: 500; color: var(--ink); text-decoration: none; }
.dock__login:hover { color: var(--red-ink); }
.dock__links a[aria-current="page"] { color: var(--red-ink); }
@media (max-width: 520px) { .dock__login { display: none; } }

.container { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.container--narrow { max-width: 780px; }

/* ---------- article hero: a dark field, like the homepage's ---------- */
.article-hero {
  background: var(--night) url("/assets/facets-night.svg") center / cover no-repeat;
  color: #fff; padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2.75rem, 6vw, 4rem);
}
.article-hero__inner { width: min(100% - 32px, 740px); margin-inline: auto; }
.article-hero__back {
  display: flex; width: fit-content; align-items: center; gap: .4rem; margin-bottom: 2rem;
  font-size: var(--fs-small); font-weight: 600; color: var(--mist-2); text-decoration: none;
}
.article-hero__back:hover { color: #fff; }
.article-hero__tag {
  display: inline-block; margin-bottom: 1rem; padding: .25rem .7rem; border-radius: 999px;
  background: rgba(229, 57, 79, .16); color: #FF8E9C; font-size: var(--fs-small); font-weight: 600;
}
.article-hero__title {
  font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.05; font-weight: 600; letter-spacing: -.02em;
  color: #fff; margin-bottom: 1.6rem; text-wrap: balance;
}
.article-hero__meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.article-hero__avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--red-ink); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .8rem; font-weight: 700;
}
.article-hero__author-name { font-size: var(--fs-small); font-weight: 600; color: #fff; }
.article-hero__author-role,
.article-hero__date,
.article-hero__read { font-size: var(--fs-small); color: var(--mist-2); }
.article-hero__divider { width: 1px; height: 28px; background: rgba(255, 255, 255, .15); }

/* ---------- article body ---------- */
.article-body {
  width: min(100% - 32px, 740px); margin-inline: auto; padding: 3rem 0 5rem;
  font-size: 1.125rem; line-height: 1.72; color: var(--ink);
}
.article-body p { margin-bottom: 1.4rem; }
.article-body h2 {
  margin: 2.75rem 0 .8rem; font-size: clamp(1.5rem, 2.6vw, 1.875rem); line-height: 1.15;
  font-weight: 600; letter-spacing: -.012em; color: var(--ink);
}
.article-body h3 { margin: 2rem 0 .5rem; font-size: 1.25rem; line-height: 1.25; font-weight: 600; color: var(--ink); }
.article-body ul, .article-body ol { margin: 0 0 1.4rem 1.25rem; padding: 0; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: .45rem; padding-left: .2rem; }
.article-body strong { font-weight: 700; color: var(--ink); }
.article-body a { color: var(--red-ink); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--ink); }
.article-body blockquote {
  margin: 2rem 0; padding: .25rem 0 .25rem 1.4rem; border-left: 3px solid var(--red-ink);
  font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.5; color: var(--ink);
}
.article-body blockquote p:last-child { margin-bottom: 0; }

/* Worked figures: the same white sheet as the homepage's workings. */
.calc-box {
  --cut: 18px;
  clip-path: polygon(0 var(--cut), calc(var(--cut) * .26) calc(var(--cut) * .61), calc(var(--cut) * .58) calc(var(--cut) * .27), var(--cut) 0, 100% 0, 100% 100%, 0 100%);
  margin: 2rem 0; padding: 1.5rem 1.6rem 1.4rem; background: #fff;
}
.calc-box__title { margin-bottom: .9rem; font-size: 1rem; font-weight: 600; color: var(--ink); }
.calc-box table { width: 100%; border-collapse: collapse; font-size: 1rem; font-variant-numeric: tabular-nums; }
.calc-box td { padding: .45rem 0; vertical-align: top; border-top: 1px dashed #E3DED4; }
.calc-box tr:first-child td { border-top: 0; }
.calc-box td:last-child { padding-left: 1rem; text-align: right; white-space: nowrap; }
.calc-box tr.subtotal td { border-top: 1px solid var(--line); font-weight: 600; }
.calc-box tr.total td { border-top: 1px solid var(--ink); padding-top: .6rem; font-weight: 700; font-size: 1.0625rem; }
.calc-box tr.total td:last-child { text-decoration: underline double; text-underline-offset: 5px; }
.calc-box tr.negative td:last-child,
.calc-box tr.error td:last-child { color: var(--red-ink); }
.calc-box--deadlines td:first-child { width: 42%; padding-right: 1.25rem; }
.calc-box--deadlines td:last-child { white-space: normal; text-align: left; }
.calc-box--deadlines tr.total td:last-child { text-decoration: none; }
@media (max-width: 600px) {
  .calc-box--deadlines table, .calc-box--deadlines tbody, .calc-box--deadlines tr, .calc-box--deadlines td { display: block; width: 100%; }
  .calc-box--deadlines td { border-top: 0; }
  .calc-box--deadlines td:first-child { padding: .4rem 0 .1rem; font-weight: 600; }
  .calc-box--deadlines td:last-child { padding: 0 0 .5rem; color: var(--ink-2); }
  .calc-box--deadlines tr.total td:last-child { padding-bottom: 0; }
}

/* Asides: tone, not boxes and lines. */
.callout { margin: 2rem 0; padding: 1.1rem 1.35rem; font-size: 1rem; line-height: 1.65; border-left: 3px solid; }
.callout p { margin: 0; }
.callout p + p { margin-top: .75rem; }
.callout--warning { background: #FBEAEC; border-color: var(--red-ink); }
.callout--tip { background: #E6F0EA; border-color: var(--green); }
.callout--rooby { background: #E4E8F0; border-color: var(--night); }
.callout__icon { margin-right: .35rem; }

/* Rate tables. Posts whose middle columns are figures add
   .rate-table--figures to right-align them. */
.rate-table { width: 100%; margin: 1.25rem 0 2rem; border-collapse: collapse; font-size: 1rem; font-variant-numeric: tabular-nums; }
.rate-table th {
  padding: .5rem .75rem; text-align: left; font-size: var(--fs-small); font-weight: 600;
  color: var(--ink-2); border-bottom: 1px solid var(--ink);
}
.rate-table td { padding: .65rem .75rem; vertical-align: top; border-bottom: 1px solid var(--line); }
.rate-table tr:last-child td { border-bottom: 0; }
.rate-table td.highlight { font-weight: 700; }
.rate-table td.red { color: var(--red-ink); font-weight: 600; }
.rate-table--figures td:nth-child(2), .rate-table--figures td:nth-child(3),
.rate-table--figures th:nth-child(2), .rate-table--figures th:nth-child(3) { text-align: right; }
@media (max-width: 600px) { .rate-table { display: block; overflow-x: auto; } }

/* A year, month by month. */
.timeline { margin: 2rem 0; padding-left: 1.5rem; border-left: 2px solid var(--line); }
.timeline__item { position: relative; margin-bottom: 1.5rem; }
.timeline__item::before {
  content: ''; position: absolute; left: calc(-1.5rem - 6px); top: .35rem;
  width: 10px; height: 10px; border-radius: 50%; background: var(--night);
}
.timeline__item.danger::before { background: var(--red-ink); }
.timeline__month { margin-bottom: .15rem; font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }
.timeline__event { font-size: 1rem; }
.timeline__cash { margin-top: .15rem; font-size: var(--fs-small); font-weight: 700; }
.timeline__cash.positive { color: var(--green); }
.timeline__cash.negative { color: var(--red-ink); }

/* Two sets of figures side by side. */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: 2rem 0; }
.compare-card { padding: 1.25rem 1.4rem; background: #fff; }
.compare-card__label { margin-bottom: .75rem; font-size: 1rem; font-weight: 600; }
.compare-card table { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; }
.compare-card td { padding: .35rem 0; border-top: 1px dashed #E3DED4; }
.compare-card td:last-child { text-align: right; white-space: nowrap; }
.compare-card tr.total td { border-top: 1px solid var(--ink); font-weight: 700; }
@media (max-width: 600px) { .compare-grid { grid-template-columns: 1fr; } }

/* The closing ask: a dark field with the gem's cut corner. */
.article-cta {
  --cut: 40px;
  clip-path: polygon(0 var(--cut), calc(var(--cut) * .26) calc(var(--cut) * .61), calc(var(--cut) * .58) calc(var(--cut) * .27), var(--cut) 0, 100% 0, 100% 100%, 0 100%);
  margin-top: 3.5rem; padding: 2.25rem 2.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  background: var(--night) url("/assets/facets-night.svg") center / cover no-repeat; color: #fff;
}
.article-cta__text strong { display: block; margin-bottom: .4rem; font-size: 1.25rem; font-weight: 600; color: #fff; }
.article-cta__text p { margin: 0; max-width: 400px; font-size: 1rem; line-height: 1.6; color: var(--mist); }
.article-body .article-cta a.btn { color: var(--night); text-decoration: none; }
.btn--pill { border-radius: 0; }

/* Related articles, inside .article-body, so selectors are element-qualified. */
.related-posts { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.related-posts h2.related-posts__heading { margin: 0 0 1rem; font-size: 1.25rem; }
.related-posts ul.related-posts__list { list-style: none; margin: 0; padding: 0; }
.related-posts li.related-posts__item { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0; padding: .55rem 0; border-top: 1px dashed #DCD7CD; }
.related-posts li.related-posts__item a { text-decoration: none; color: var(--ink); font-weight: 600; }
.related-posts li.related-posts__item a:hover { color: var(--red-ink); }
.related-posts .related-posts__tag { flex-shrink: 0; font-size: var(--fs-small); font-weight: 600; color: var(--red-ink); }

@media (max-width: 600px) {
  .article-hero__divider { display: none; }
  .article-hero__meta { gap: .5rem .9rem; }
  .article-cta { flex-direction: column; align-items: flex-start; padding: 2rem 1.5rem 1.75rem; }
  .article-cta__text p { max-width: 100%; }
}

/* ---------- the blog index ---------- */
.blog-hero { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2rem, 4vw, 3rem); }
.blog-hero .section-title {
  max-width: 20ch; margin: 0 0 1rem; font-size: var(--fs-h2); line-height: 1; font-weight: 600; letter-spacing: -.02em; text-wrap: balance;
}
.blog-hero .section-body { max-width: 36rem; margin: 0; font-size: var(--fs-lead); color: var(--ink-2); }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; padding-bottom: 5rem; }
@media (max-width: 1024px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card {
  position: relative; display: flex; flex-direction: column; padding: 1.6rem 1.6rem 1.4rem; background: #fff;
  transition: background-color .2s;
}
.blog-card:hover { background: #FFFDF9; }
.blog-card__tag { margin-bottom: .7rem; font-size: var(--fs-small); font-weight: 600; color: var(--red-ink); }
.blog-card__title { margin-bottom: .6rem; font-size: 1.25rem; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.blog-card__desc { flex: 1; margin-bottom: 1.2rem; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.blog-card__meta { margin-bottom: .9rem; font-size: var(--fs-small); color: var(--ink-2); }
.blog-card__link { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-small); font-weight: 600; color: var(--ink); text-decoration: none; transition: gap .15s; }
/* The whole card is the link's target. */
.blog-card__link::after { content: ''; position: absolute; inset: 0; }
.blog-card:hover .blog-card__link { gap: .55rem; color: var(--red-ink); }

/* ---------- legal pages ---------- */
.legal { padding: clamp(3rem, 7vw, 5rem) 0 clamp(4rem, 8vw, 6rem); }
.legal__card { font-size: 1.0625rem; line-height: 1.7; }
.legal__title { font-size: var(--fs-h2); line-height: 1; font-weight: 600; letter-spacing: -.02em; margin-bottom: .75rem; }
.legal__meta { margin-bottom: 2.5rem; color: var(--ink-2); }
.legal__card h2 { margin: 2.5rem 0 .7rem; font-size: 1.5rem; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
.legal__card h3 { margin: 1.75rem 0 .5rem; font-size: 1.15rem; font-weight: 600; }
.legal__card p { margin-bottom: 1rem; }
.legal__card ul, .legal__card ol { margin: 0 0 1rem 1.25rem; }
.legal__card ul { list-style: disc; }
.legal__card ol { list-style: decimal; }
.legal__card li { margin-bottom: .4rem; }
.legal__card a { color: var(--red-ink); text-underline-offset: 3px; }
.legal__card strong { font-weight: 700; }
.legal__table { width: 100%; margin: 1rem 0 1.5rem; border-collapse: collapse; font-size: .95rem; }
.legal__table th { padding: .55rem .6rem; text-align: left; font-weight: 600; border-bottom: 1px solid var(--ink); }
.legal__table td { padding: .55rem .6rem; vertical-align: top; border-bottom: 1px solid var(--line); }
@media (max-width: 600px) { .legal__table { display: block; overflow-x: auto; } }
.legal__footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-small); }

/* ---------- 404 ---------- */
.lost {
  padding: clamp(5rem, 12vw, 9rem) 0; color: #fff; text-align: center;
  background: var(--night) url("/assets/facets-night.svg") center / cover no-repeat;
}
.lost h1 { font-size: var(--fs-h2); line-height: 1; font-weight: 600; letter-spacing: -.02em; margin-bottom: 1rem; }
.lost p { max-width: 32rem; margin: 0 auto 2rem; color: var(--mist); font-size: var(--fs-lead); }
.lost__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.5rem; margin-top: 2.25rem; }
.lost__links a { color: #fff; font-weight: 600; text-underline-offset: 3px; }

/* ---------- the old template's article layout (blog/template.html) ---------- */
.article-wrap { width: min(100% - 32px, 740px); margin-inline: auto; padding: 3rem 0 5rem; }
.article-back { display: inline-block; margin-bottom: 1.5rem; font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); text-decoration: none; }
.article-tag { display: inline-block; margin-bottom: .8rem; font-size: var(--fs-small); font-weight: 600; color: var(--red-ink); }
.article-title { font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.05; font-weight: 600; letter-spacing: -.02em; margin-bottom: 1.25rem; }
.article-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; font-size: var(--fs-small); color: var(--ink-2); }
.article-meta__author { display: flex; align-items: center; gap: .6rem; }
.article-meta__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--red-ink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.article-meta__name { font-weight: 600; color: var(--ink); }
.article-meta__divider { width: 1px; height: 24px; background: var(--line); }
.article-callout { margin: 2rem 0; padding: 1.1rem 1.35rem; background: #E4E8F0; border-left: 3px solid var(--night); }
.article-callout p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .blog-card, .blog-card__link { transition: none; }
}