/* The blog: the site's misty background, the calculators' answer panel for the text,
   the legal pages' contents beside it. Only what the site has no rule for is set here. */

.blog-page { position: relative; z-index: 1; padding-block-end: var(--home-space-24); }
.blog-breadcrumbs { margin-block-end: var(--home-space-8); }

/* Headings of lists: the way every section of the site speaks. */
.blog-hero { max-width: 58rem; padding-block: var(--home-space-4) var(--home-space-10); }
.blog-hero h1 { margin: 0; font: 400 var(--home-type-section)/1.12 var(--home-font); letter-spacing: -0.035em; color: var(--home-text); }
.blog-hero h1 em { font-style: normal; color: var(--home-text-soft); }
.blog-hero__lead { max-width: 64ch; margin: var(--home-space-6) 0 0; font: 400 var(--home-type-lead)/1.65 var(--home-font); color: var(--home-text-soft); }

/* Topics and the search, one quiet row under the heading. */
.blog-topics { margin-block-end: var(--home-space-6); }
.blog-chips { display: flex; flex-wrap: wrap; gap: var(--home-space-3); margin: 0; padding: 0; list-style: none; }
.blog-chip {
    display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 var(--home-space-5);
    border: 1px solid rgba(224, 230, 238, 0.22); border-radius: var(--home-radius-control);
    background: rgba(17, 20, 30, 0.5); color: var(--home-text-soft);
    font: 400 1rem/1 var(--home-font); text-decoration: none;
    transition: border-color var(--home-duration-fast) ease, color var(--home-duration-fast) ease, background-color var(--home-duration-fast) ease;
}
.blog-chip:is(:hover, :focus-visible) { border-color: rgba(224, 230, 238, 0.5); color: var(--home-text); }
.blog-chip[aria-current] { border-color: var(--home-silver); background: var(--home-silver); color: var(--home-ink); }

.blog-search { display: flex; gap: var(--home-space-3); max-width: 40rem; margin-block-end: var(--home-space-12); }
.blog-search input {
    flex: 1 1 auto; min-width: 0; height: var(--home-control-height); padding: 0 var(--home-space-6);
    border: 1px solid rgba(224, 230, 238, 0.22); border-radius: var(--home-radius-control);
    background: rgba(12, 14, 22, 0.72); color: var(--home-text); font: 400 1rem/1 var(--home-font);
}
.blog-search input::placeholder { color: var(--home-text-faint); }
.blog-search input:focus-visible { outline: var(--home-focus-width) solid var(--home-focus); outline-offset: 2px; }
.blog-search .button { flex: 0 0 auto; }
.blog-search__count { margin: 0 0 var(--home-space-8); color: var(--home-text-soft); font-size: var(--home-type-lead); }
.blog-search__count a, .blog-empty a { color: var(--home-text); }
.blog-empty { max-width: 48ch; color: var(--home-text-soft); font: 400 var(--home-type-lead)/1.65 var(--home-font); }

/* Cards of articles. The whole card is one link, named by its title. */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--home-space-8); margin: 0; padding: 0; list-style: none; }
.blog-grid > li { display: grid; min-width: 0; }
.blog-card { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; min-width: 0; transition: border-color var(--home-duration-fast) ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1); }
.blog-card:has(a:is(:hover, :focus-visible)) { border-color: rgba(224, 230, 238, 0.42); transform: translateY(-3px); }
.blog-card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-surface); }
.blog-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1); }
.blog-card:has(a:is(:hover, :focus-visible)) .blog-card__media img { transform: scale(1.03); }
.blog-card__body { display: grid; align-content: start; gap: var(--home-space-3); padding: var(--home-space-6); }
.blog-card__topic { margin: 0; color: var(--home-text-soft); font-size: var(--home-type-caption); font-weight: 700; letter-spacing: var(--home-track-label); text-transform: uppercase; }
.blog-card__title { margin: 0; font: 400 clamp(1.25rem, 1.6vw, 1.5rem)/1.25 var(--home-font); color: var(--home-text); }
.blog-card__title a { color: inherit; text-decoration: none; }
.blog-card__title a::after { position: absolute; inset: 0; content: ""; }
.blog-card__title a:focus-visible { outline: none; }
.blog-card:has(.blog-card__title a:focus-visible) { outline: var(--home-focus-width) solid var(--home-focus); outline-offset: 3px; }
.blog-card__text { display: -webkit-box; margin: 0; overflow: hidden; color: var(--home-text-soft); font: 400 1rem/1.55 var(--home-font); -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.blog-card__meta { margin: var(--home-space-2) 0 0; color: var(--home-text-muted); font-size: var(--home-type-label); }

.blog-pages { margin-block-start: var(--home-space-12); }
.blog-pages ol { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--home-space-2); margin: 0; padding: 0; list-style: none; color: var(--home-text-muted); }
.blog-pages :is(a, span) { display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 var(--home-space-3); border-radius: var(--home-radius-control); color: var(--home-text-soft); text-decoration: none; }
.blog-pages a:is(:hover, :focus-visible) { color: var(--home-text); background: rgba(224, 230, 238, 0.08); }
.blog-pages [aria-current] { border: 1px solid var(--home-silver); color: var(--home-text); }

/* An article, all on the page's one width: the heading across it, the wide cover under
   it, then the contents beside one text panel. */
.blog-article__header { display: grid; gap: var(--home-space-5); padding-block: var(--home-space-2) var(--home-space-10); }
.blog-article__header > * { margin: 0; }
.blog-article__header .home-overline a { color: inherit; text-decoration: none; }
.blog-article__header .home-overline a:is(:hover, :focus-visible) { color: var(--home-text); }
.blog-article__header h1 { max-width: none; font: 400 clamp(2.25rem, 4.2vw, 4rem)/1.1 var(--home-font); letter-spacing: -0.035em; color: var(--home-text); text-wrap: balance; overflow-wrap: break-word; }
.blog-article__lead { max-width: 72ch; color: var(--home-text-soft); font: 400 clamp(1.0625rem, 1.25vw, 1.25rem)/1.6 var(--home-font); text-wrap: pretty; }
.blog-article__meta { color: var(--home-text-muted); font-size: var(--home-type-label); }
.blog-article__cover { margin: 0; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid rgba(224, 230, 238, 0.14); border-radius: var(--home-radius-surface); background: var(--color-surface); box-shadow: 0 var(--home-space-5) var(--home-space-12) rgba(0, 0, 0, 0.45); }
.blog-article__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-article > .ad-slot { margin-block: var(--home-space-10) 0; }
.blog-article__layout { margin-block-start: var(--home-space-12); }
.blog-article__layout--single { display: grid; }
.blog-article__main { display: grid; align-content: start; gap: var(--home-space-10); min-width: 0; }

/* The text panel is the calculators' answer panel; its chapters keep the answer's hairlines. */
.blog-article__doc > .ad-slot { margin: 0 auto; }
.blog-article__opening-group { display: grid; gap: var(--home-space-6); min-width: 0; }
/* An article opens with a whole paragraph, longer than an answer's opening line, so its voice is a step quieter. */
.blog-article__opening { max-width: 60ch; font-size: clamp(1.1875rem, 1.45vw, 1.5rem); line-height: 1.5; }
.blog-chapter { scroll-margin-block-start: 7.5rem; min-width: 0; }
.blog-chapter .numerology-chapter__title { max-width: none; font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.2; text-wrap: balance; }
.blog-chapter .numerology-chapter__note { font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.blog-article__footer { display: grid; gap: var(--home-space-4); max-width: none; }
.blog-article__author { margin: 0; color: var(--home-text-muted); font-size: var(--home-type-label); }

/* Reading text inside a chapter. The answer resets paragraph measure and rhythm; the article sets its own. */
.blog-prose { min-width: 0; color: var(--home-text-soft); font: 400 clamp(1.0625rem, 1.25vw, 1.25rem)/1.7 var(--home-font); overflow-wrap: break-word; }
.blog-prose > :first-child { margin-top: 0; }
.blog-prose > :last-child { margin-bottom: 0; }
.blog-prose p { margin: 0 0 1.1em; }
.blog-prose h3 { margin: 1.9em 0 0.7em; color: var(--home-text); font: 400 clamp(1.25rem, 1.7vw, 1.45rem)/1.3 var(--home-font); scroll-margin-top: 7.5rem; }
.blog-prose strong { color: var(--home-text); font-weight: 700; }
.blog-prose a { color: var(--home-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.blog-prose a:is(:hover, :focus-visible) { color: var(--home-silver-strong); text-decoration-thickness: 2px; }
.blog-prose :is(ul, ol) { margin: 0 0 1.1em; padding-inline-start: 1.4em; }
.blog-prose li { margin-bottom: 0.45em; padding-inline-start: 0.2em; }
.blog-prose li::marker { color: var(--home-amber); }
.blog-quote { margin: 1.6em 0; padding: 0.2em 0 0.2em 1.4em; border-inline-start: 2px solid var(--home-silver); color: var(--home-text); font-style: italic; }
.blog-quote p:last-child { margin-bottom: 0; }
.blog-rule { height: 1px; margin: 2.2em 0; border: 0; background: var(--color-line); }
.blog-table { margin: 1.6em 0; overflow-x: auto; border: 1px solid var(--color-line); border-radius: 0.75rem; }
.blog-table:focus-visible { outline: var(--home-focus-width) solid var(--home-focus); outline-offset: 2px; }
.blog-table table { width: 100%; border-collapse: collapse; font-size: 0.95em; line-height: 1.5; }
.blog-table :is(th, td) { padding: 0.7em 0.9em; border-bottom: 1px solid var(--color-line); text-align: start; vertical-align: top; }
.blog-table th { color: var(--home-text); font-weight: 700; background: rgba(224, 230, 238, 0.05); }
.blog-table tr:last-child td { border-bottom: 0; }
.blog-figure { margin: 1.8em 0; }
.blog-figure img { display: block; width: 100%; height: auto; border-radius: 0.9rem; background: var(--color-surface); }
/* A tall picture keeps a readable width; the width is set, so its place is kept before it loads. */
.blog-figure--tall img { width: min(100%, 28rem); margin-inline: auto; }
.blog-figure figcaption { margin-top: 0.8em; color: var(--home-text-muted); font-size: var(--home-type-label); line-height: 1.5; text-align: center; }
/* Numbers in rows and dates stand on the line, as elsewhere on the site. */
.blog-table, .blog-card__meta, .blog-article__meta, .blog-pages { font-variant-numeric: lining-nums tabular-nums; }

/* An offer of the site's own products, inside a chapter or after the text. */
.blog-offer { display: grid; gap: var(--home-space-6); padding: clamp(var(--home-space-6), 3.5vw, var(--home-space-10)); }
.blog-prose .blog-offer { margin: 2em 0; }
.blog-offer p { margin: 0; }
.blog-offer .home-overline { margin-bottom: var(--home-space-3); }
.blog-offer__title { color: var(--home-text); font: 400 clamp(1.4rem, 2.2vw, 1.85rem)/1.2 var(--home-font); letter-spacing: -0.02em; }
.blog-offer .blog-offer__text { margin-top: var(--home-space-3); color: var(--home-text-soft); font: 400 1.0625rem/1.6 var(--home-font); }
.blog-offer__button { justify-self: start; gap: var(--home-space-3); }
.blog-prose .blog-offer__button { color: var(--home-ink); text-decoration: none; }

/* Inserts: what a reader takes in at a glance. They speak in the calculators' voice, where
   the chosen point of a drawing turns warm amber against the silver of everything else. */
.blog-insert { position: relative; margin: 2.2em 0; }
.blog-insert__head { display: grid; gap: var(--home-space-2); margin-bottom: var(--home-space-5); }
.blog-insert__label { color: var(--home-amber); font-size: var(--home-type-caption); line-height: 1.4; letter-spacing: var(--home-track-label); text-transform: uppercase; }
.blog-insert__title { color: var(--home-text); font: 400 clamp(1.25rem, 1.8vw, 1.6rem)/1.25 var(--home-font); letter-spacing: -0.012em; text-wrap: balance; }
.blog-insert :is(.blog-steps__name, .blog-steps__note, .blog-calc__count, .blog-calc__note, .blog-calc__math, .blog-calc__answer) { margin: 0; }
.blog-insert__body { color: var(--home-text); }
.blog-insert__body > :last-child { margin-bottom: 0; }
.blog-insert__body ul { display: grid; gap: 0.6em; padding: 0; list-style: none; }
.blog-insert__body ul > li { position: relative; margin: 0; padding-inline-start: 1.6em; }
.blog-insert__body ul > li::before { position: absolute; inset-inline-start: 0.2em; top: 0.68em; inline-size: 0.42em; block-size: 0.42em; border: 1px solid var(--home-amber); rotate: 45deg; content: ""; }

/* A summary is a lit card; a warning is a warm edge along its words. */
.blog-insert--summary {
    padding: clamp(var(--home-space-6), 3vw, var(--home-space-10));
    border: 1px solid color-mix(in srgb, var(--home-amber) 28%, transparent);
    border-radius: var(--home-radius-surface);
    background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--home-amber) 10%, transparent), transparent 62%), rgb(12 14 22 / 0.4);
}
.blog-insert--important {
    padding: var(--home-space-5) var(--home-space-5) var(--home-space-5) clamp(var(--home-space-5), 2.6vw, var(--home-space-8));
    border-inline-start: 2px solid var(--home-amber);
    border-radius: 0 var(--home-radius-surface) var(--home-radius-surface) 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--home-amber) 9%, transparent), transparent 72%);
}
.blog-insert--important .blog-insert__head { margin-bottom: var(--home-space-3); }
.blog-insert--important .blog-insert__label { display: flex; align-items: center; gap: var(--home-space-3); }
.blog-insert--important .blog-insert__label::before {
    display: grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem;
    border: 1px solid var(--home-amber); border-radius: 50%;
    font-size: 0.8rem; letter-spacing: 0;
    content: "!"; content: "!" / "";
}

/* Steps hang on one thread, each number in a ring like a point of the matrix. */
.blog-insert .blog-steps { display: grid; margin: 0; padding: 0; list-style: none; }
.blog-insert .blog-steps__item { position: relative; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: var(--home-space-5); row-gap: 0.35em; margin: 0; padding: 0 0 var(--home-space-6); }
.blog-insert .blog-steps__item:last-child { padding-bottom: 0; }
.blog-steps__item:not(:last-child)::before { position: absolute; inset-inline-start: calc(1.375rem - 0.5px); top: 2.75rem; bottom: 0; inline-size: 1px; background: linear-gradient(color-mix(in srgb, var(--home-amber) 45%, transparent), var(--color-line)); content: ""; }
.blog-steps__number {
    grid-row: 1 / span 2; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem;
    border: 1px solid color-mix(in srgb, var(--home-amber) 72%, transparent); border-radius: 50%;
    background: color-mix(in srgb, var(--home-amber) 7%, transparent);
    color: var(--home-amber); font: 400 1.125rem/1 var(--home-font);
}
.blog-steps__name { padding-top: 0.45rem; color: var(--home-text); line-height: 1.4; }
.blog-steps__note { color: var(--home-text-soft); font-size: 0.95em; line-height: 1.6; }

/* Key numbers, large and warm, each with what it counts. */
.blog-insert .blog-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--home-space-8) var(--home-space-6); margin: 0; padding: 0; list-style: none; }
.blog-insert .blog-numbers__item { display: grid; align-content: start; gap: var(--home-space-2); margin: 0; padding: var(--home-space-5) 0 0; border-top: 1px solid var(--color-line); }
.blog-numbers__figure { color: var(--home-amber); font: 400 var(--home-type-numeral)/0.95 var(--home-font); letter-spacing: -0.02em; text-shadow: 0 0 1.75rem color-mix(in srgb, var(--home-amber) 32%, transparent); }
.blog-numbers__caption { color: var(--home-text); font-size: var(--home-type-caption); letter-spacing: var(--home-track-label); text-transform: uppercase; }
.blog-numbers__note { color: var(--home-text-muted); font-size: 0.9em; line-height: 1.5; }

/* A calculation and a scale are drawn on a panel of their own, like the calculators' formula. */
.blog-insert:is(.blog-insert--calc, .blog-insert--timeline) {
    display: grid; gap: var(--home-space-5);
    padding: clamp(var(--home-space-6), 3.2vw, var(--home-space-10));
    border: 1px solid var(--color-line);
    border-radius: var(--home-radius-surface);
    background: radial-gradient(90% 80% at 100% 100%, color-mix(in srgb, var(--home-amber) 8%, transparent), transparent 64%), rgb(12 14 22 / 0.4);
}
.blog-insert:is(.blog-insert--calc, .blog-insert--timeline) .blog-insert__head { margin: 0; }
.blog-insert .blog-calc__steps { display: grid; margin: 0; padding: 0; list-style: none; }
.blog-insert .blog-calc__step { display: grid; gap: var(--home-space-3); margin: 0; padding: var(--home-space-5) 0; border-top: 1px dotted var(--color-line); }
.blog-insert .blog-calc__step:last-child { padding-bottom: 0; }
.blog-calc__count { color: var(--home-text-faint); font-size: var(--home-type-caption); letter-spacing: var(--home-track-label); text-transform: uppercase; }
.blog-calc__count b { font-weight: 400; color: var(--home-silver); }
.blog-calc__note { color: var(--home-text); line-height: 1.45; }
.blog-calc__math { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--home-space-2) var(--home-space-3); }
.blog-calc__term { display: grid; justify-items: center; gap: 0.3rem; min-inline-size: 1.6rem; }
.blog-calc__term b { color: var(--home-text); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 400; line-height: 1.1; }
.blog-calc__term small { color: var(--home-text-muted); font-size: 0.8rem; line-height: 1.2; letter-spacing: 0.06em; text-align: center; }
.blog-calc__term--result b { color: var(--home-amber); text-shadow: 0 0 1.1rem color-mix(in srgb, var(--home-amber) 45%, transparent); }
.blog-calc__sign { padding-top: 0.2em; color: var(--home-silver); font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.1; }
.blog-insert .blog-calc__answer { display: flex; align-items: center; gap: var(--home-space-6); padding-top: var(--home-space-6); border-top: 1px solid var(--color-line); }
.blog-calc__orb { position: relative; flex: none; display: grid; place-items: center; inline-size: clamp(5.5rem, 9vw, 7rem); aspect-ratio: 1; }
.blog-calc__ring { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.blog-calc__ring circle { fill: color-mix(in srgb, var(--home-amber) 7%, transparent); stroke: var(--home-amber); stroke-width: 1.3; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--home-amber) 55%, transparent)); }
.blog-calc__value { position: relative; color: var(--home-amber); font: 400 var(--home-type-numeral)/1 var(--home-font); }
.blog-calc__caption { display: grid; gap: var(--home-space-2); color: var(--home-text); font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.3; text-wrap: balance; }

/* A scale: every row a bar on the same line, so order and length are seen at once. The
   rows share the columns of the list, so every bar starts and ends on the same scale. */
.blog-insert .blog-timeline { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--home-space-4) var(--home-space-4); margin: 0; padding: 0; list-style: none; }
.blog-insert .blog-timeline__row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; row-gap: 0.2rem; margin: 0; padding: 0; }
.blog-timeline__label { grid-column: 1; grid-row: 1; min-inline-size: 1.75rem; color: var(--home-text); font: 400 clamp(1.35rem, 2vw, 1.7rem)/1 var(--home-font); text-align: center; }
.blog-timeline__bar { grid-column: 2; display: block; inline-size: 100%; block-size: 0.75rem; overflow: visible; }
.blog-timeline__track { fill: color-mix(in srgb, var(--home-silver) 10%, transparent); }
.blog-timeline__fill { fill: var(--home-amber); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--home-amber) 55%, transparent)); }
.blog-timeline__range { grid-column: 3; color: var(--home-text-soft); font-size: var(--home-type-label); white-space: nowrap; text-align: end; }
.blog-timeline__note { grid-column: 2 / -1; color: var(--home-text-muted); font-size: var(--home-type-label); line-height: 1.4; }
/* Figures stand on the line in every insert, the way the calculators set them. The rule
   comes last, because the font shorthand of a figure resets it. */
.blog-insert, .blog-insert * { font-variant-numeric: lining-nums tabular-nums; }
/* On a narrow text a key number stands beside its words, not above them. */
@container answer (max-width: 30rem) {
    .blog-insert .blog-numbers { grid-template-columns: auto minmax(0, 1fr); gap: var(--home-space-5) var(--home-space-5); }
    .blog-insert .blog-numbers__item { grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; }
    .blog-numbers__figure { grid-row: 1 / span 2; font-size: 2.75rem; }
}

.blog-related { margin-block-start: var(--home-space-20); }
.blog-related h2 { margin: 0 0 var(--home-space-8); font: 400 var(--home-type-section)/1.12 var(--home-font); letter-spacing: -0.03em; color: var(--home-text); }

@media (min-width: 48rem) {
    .blog-offer { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--home-space-10); }
    .blog-offer__button { justify-self: end; }
}

@media (max-width: 63.9375rem) {
    .blog-article__layout { margin-block-start: var(--home-space-10); }
}

@media (max-width: 47.99rem) {
    .blog-breadcrumbs { margin-block-end: var(--home-space-5); }
    .blog-hero { padding-block-end: var(--home-space-8); }
    .blog-search { margin-block-end: var(--home-space-8); }
    .blog-search .button { padding-inline: var(--home-space-5); }
    .blog-grid { gap: var(--home-space-6); }
    .blog-article__header { padding-block-end: var(--home-space-8); }
    .blog-article__cover { aspect-ratio: 3 / 2; border-radius: 1rem; }
    .blog-chapter .numerology-chapter__heading { flex-direction: column-reverse; align-items: flex-start; gap: var(--home-space-2); }
    .blog-offer__button { justify-self: stretch; justify-content: center; }
    .blog-related { margin-block-start: var(--home-space-16); }
}

/* Text still waiting for the reader on screen is printed all the same. */
@media print {
    .blog-article__doc * { opacity: 1 !important; clip-path: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .blog-card, .blog-card__media img { transition: none; }
    .blog-card:has(a:is(:hover, :focus-visible)), .blog-card:has(a:is(:hover, :focus-visible)) .blog-card__media img { transform: none; }
}