/* Theme Overrides */
:root {
    --bg-color: #FBFAF6;
    --paper-color: #FFFFFF;
    --ink-color: #1A2738;
    --ink-hover-color: #253449;
    --muted-color: #5B6A7A;
    --line-color: #1A2738;
    --soft-color: #E9EAE6;
    --sky-color: #93C6D5;
    --mint-color: #D4E8E8;
    --slate-color: #1F3A5F;
    --coral-color: #E6653C;
    --coral-hover-color: #D4562F;
    --gold-color: #D2A63A;
    --on-dark-color: #FBFAF6;
    --on-dark-muted-color: #C9E2E8;
    --gold-tint-color: #F2E6C8;
    --gold-deep-color: #7A5B12;
    --mint-tint-color: #E1EFEF;
    --mint-deep-color: #1C5560;
    --coral-tint-color: #F9DED4;
    --coral-deep-color: #A33D1B;

    --display-font-family: Oswald, "Helvetica Neue", Arial, sans-serif;
    --body-font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    --mono-font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
    --math-font-family: "Latin Modern Math", "STIX Two Math", "Cambria Math", Georgia, serif;

    --gutter: 56px;
    /* How far the window extends past the 1280px artboard on each side; bands paint into it. */
    --bleed: max(0px, calc(50vw - 640px));
    --gutter-x: calc(var(--gutter) + var(--bleed));
    --radius: 1.25rem;
    --stretched-spacing: .15em;
    --extra-stretched-spacing: .25em;
    --card-shadow: 0 20px 40px -24px rgba(31, 43, 51, .5);
    --cover-shadow: 0 18px 26px -16px rgba(31, 43, 51, .6);

    --bulma-body-background-color: var(--bg-color);
    --bulma-body-color: var(--ink-color);
    --bulma-body-font-size: 1.125rem;
    --bulma-body-line-height: 1.5;
    --bulma-family-primary: var(--body-font-family);
    --bulma-family-code: var(--mono-font-family);
    --bulma-link-text: currentColor;
    --bulma-duration: .15s;
    --bulma-strong-color: currentColor;
    --bulma-strong-weight: 700;
    --bulma-code: currentColor;
    --bulma-code-background: var(--soft-color);
    --bulma-code-size: .86em;
    --bulma-code-padding: 2px 7px;
    --bulma-hr-background-color: var(--line-color);
    --bulma-hr-margin: 8px 0;
}

@media screen and (max-width: 1023px) {
    :root { --gutter: 32px; }
}

@media screen and (max-width: 768px) {
    :root { --gutter: 20px; --bulma-body-font-size: 1.0625rem; }
}

/* Covers and art fill their Bulma .image frames. */
.image img { object-fit: cover; }

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; }
}

/* Colors */
.is-ink { color: var(--ink-color); }
.is-muted { color: var(--muted-color); }
.is-slate { color: var(--slate-color); }
.is-on-dark { color: var(--on-dark-color); }
.is-on-dark-muted { color: var(--on-dark-muted-color); }
.has-background-paper { background-color: var(--paper-color); }
.has-background-soft { background-color: var(--soft-color); }
.has-background-mint { background-color: var(--mint-color); }
.has-background-coral { background-color: var(--coral-color); }
.has-background-slate { background-color: var(--slate-color); }
.has-background-ink { background-color: var(--ink-color); }
.has-background-sky { background-image: linear-gradient(180deg, var(--sky-color), var(--mint-color)); }

/* Default Typography */
a:hover { color: var(--coral-color); }
img { display: block; }
ol { list-style: none; }

h1, h2, h3, h4 {
    font-family: var(--display-font-family);
    text-transform: uppercase;
    text-wrap: balance;
}

h1, h2 { font-weight: 700; }
h1 { line-height: .95; }

/* Markdown lands in .prose (posts, pages, books) and .article (tutorials); these rules dress what it produces. */
.prose, .article { --stack-gap: 1.5rem; --bulma-block-spacing: 0; }
.prose { line-height: 1.55; }
.article > p { line-height: 1.55; }

/* Spacing depends on the neighbour: headings get room above, and what a heading or paragraph introduces sits close below it. */
.prose > * + *, .article > * + *, .prose .cell > * + * { margin-top: var(--stack-gap); }
.prose > h2, .article > h2 { margin-top: 3rem; }
.prose > h3, .article > h3 { margin-top: 2.5rem; }
.prose > h4, .article > h4 { margin-top: 2rem; }
.prose > :is(h2, h3, h4) + *, .article > :is(h2, h3, h4) + *,
.prose > p + :is(ul, ol, pre, .filename), .article > p + :is(ul, ol, pre, .filename) { margin-top: .75rem; }
.prose > :first-child, .article > :first-child { margin-top: 0; }

.prose p a,
.prose li a,
.prose td a,
.prose blockquote a,
.prose cite a,
.prose figcaption a,
.article p a,
.article li a,
.article td a,
.article blockquote a,
.article cite a,
.article figcaption a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--coral-color);
    text-underline-offset: 3px;
}
 .hero-art figcaption a {
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 3px;
 }

.prose h2, .article h2 { font-size: 36px; line-height: 1; }

.article h2 {
    display: flex;
    gap: 16px;
    align-items: baseline;
    scroll-margin-top: 24px;
}

.article h2 .num {
    flex: none;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: var(--extra-stretched-spacing);
    color: var(--coral-color);
}

.prose h3, .article h3 {
    font-weight: 600;
    font-size: 24px;
    line-height: 1.15;
}

.prose h4, .article h4 {
    font-weight: 500;
    font-size: 15px;
    letter-spacing: var(--stretched-spacing);
    color: var(--slate-color);
}

@media screen and (max-width: 768px) {
    .prose h2, .article h2 { font-size: 26px; }
    .prose h3, .article h3 { font-size: 20px; }
    .prose > p, .article > p { font-size: var(--bulma-size-5); }
}

.prose ul, .prose ol, .article ul, .article ol { margin-left: 0; padding-left: 26px; }
.prose ul, .article ul { list-style: disc; }
.prose ol, .article ol { list-style: decimal; }
.prose ul ul, .article ul ul { list-style: circle; }
.prose li, .article li { padding-left: 4px; }
.prose li + li, .article li + li { margin-top: 6px; }
.prose li::marker, .article li::marker { color: var(--coral-color); }
.prose li > ul, .prose li > ol, .article li > ul, .article li > ol { margin-top: 6px; }

.prose p > img, .prose > img, .article p > img, .article > img {
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--line-color);
    border-radius: var(--radius);
}

.prose > p > img:only-child, .article > p > img:only-child { width: 100%; }

/* Captioned images: `![alt](src "caption")` on its own line (sitebuilder/captions.py). */
.prose > figure > img, .article > figure > img {
    width: 100%;
    border: 1px solid var(--line-color);
    border-radius: var(--radius);
}
.prose figcaption, .article figcaption {
    margin-top: .75rem;
    font-family: var(--mono-font-family);
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted-color);
    text-align: center;
}
.prose figcaption cite, .article figcaption cite { display: inline; font-style: italic; }

.prose cite, .article cite {
    display: block;
    font-family: var(--mono-font-family);
    font-style: normal;
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted-color);
}

.prose cite a, .article cite a { text-decoration-color: var(--muted-color); }
.prose li cite, .article li cite { margin-top: 2px; }
.prose > p:has(> cite:only-child), .article > p:has(> cite:only-child), .prose .cell > cite { margin-top: .75rem; }

.prose table:not(.hljs-ln), .article table:not(.hljs-ln) {
    width: 100%;
    border: 2px solid var(--line-color);
    font-size: 15px;
    background-color: var(--paper-color);
}

.prose table:not(.hljs-ln) th, .article table:not(.hljs-ln) th {
    padding: 10px 16px;
    background-color: var(--ink-color);
    font-family: var(--display-font-family);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: var(--stretched-spacing);
    text-transform: uppercase;
    text-align: left;
    color: var(--on-dark-color);
}

.prose table:not(.hljs-ln) td, .article table:not(.hljs-ln) td { padding: 9px 16px; border-bottom: 1px solid var(--soft-color); }
.prose table:not(.hljs-ln) tr:last-child td, .article table:not(.hljs-ln) tr:last-child td { border-bottom: 0; }

@media screen and (max-width: 768px) {
    .prose table:not(.hljs-ln), .article table:not(.hljs-ln) { font-size: 13px; }
    .prose table:not(.hljs-ln) th, .article table:not(.hljs-ln) th,
    .prose table:not(.hljs-ln) td, .article table:not(.hljs-ln) td { padding: 8px 10px; }
}

.prose pre, .article pre, .prose .codehilite, .article .codehilite {
    padding: 0;
    overflow: hidden;
    background-color: var(--ink-color);
    border: 2px solid var(--line-color);
    border-radius: var(--radius);
}

.prose pre code, .article pre code, .prose .codehilite code, .article .codehilite code {
    display: block;
    padding: 18px 22px;
    overflow-x: auto;
    background: transparent;
    border-radius: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #E8EDF2;
    scrollbar-width: thin;
    scrollbar-color: rgba(232, 237, 242, .3) transparent;
}

@media screen and (max-width: 768px) {
    .prose pre code, .article pre code, .prose .codehilite code, .article .codehilite code { padding: 14px 16px; font-size: 12.5px; }
}

/* A filename bar sits flush on its code block; source.css tints it per language. */
.prose .filename, .article .filename {
    padding: 10px 22px;
    background-color: var(--slate-color);
    border: 2px solid var(--line-color);
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    font-family: var(--display-font-family);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: var(--extra-stretched-spacing);
    text-transform: uppercase;
    color: var(--on-dark-color);
}

.prose .filename + pre, .article .filename + pre, .prose .filename + .codehilite, .article .filename + .codehilite {
    margin-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
}

.prose .admonition, .article .admonition {
    display: flex;
    gap: 16px;
    padding: 18px 22px;
    background-color: var(--gold-tint-color);
    border: 2px solid var(--line-color);
    border-radius: var(--radius);
    font-size: 16px;
    line-height: 1.55;
}

.prose .admonition-title, .article .admonition-title {
    flex: none;
    padding-top: 3px;
    font-family: var(--display-font-family);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: var(--extra-stretched-spacing);
    text-transform: uppercase;
    color: var(--gold-deep-color);
}

.prose .admonition.tip, .article .admonition.tip { background-color: var(--mint-tint-color); }
.prose .admonition.tip .admonition-title, .article .admonition.tip .admonition-title { color: var(--mint-deep-color); }
.prose .admonition.warning, .article .admonition.warning, .prose .admonition.danger, .article .admonition.danger { background-color: var(--coral-tint-color); }
.prose .admonition.warning .admonition-title, .article .admonition.warning .admonition-title,
.prose .admonition.danger .admonition-title, .article .admonition.danger .admonition-title { color: var(--coral-deep-color); }

.prose .footnote, .article .footnote {
    margin-top: 3rem;
    padding-top: 20px;
    border-top: 2px solid var(--line-color);
    font-size: 15px;
    color: var(--muted-color);
}

.prose .footnote hr, .article .footnote hr { display: none; }
.prose .footnote ol, .article .footnote ol { padding-left: 20px; }
.prose .footnote-backref, .article .footnote-backref { text-decoration: none; }

.prose blockquote, .article blockquote {
    padding: 0 0 0 20px;
    border-left: 4px solid var(--coral-color);
    font-size: 21px;
    font-style: italic;
    line-height: 1.4;
    color: var(--slate-color);
}

.prose blockquote cite, .article blockquote cite {
    display: block;
    margin-top: 10px;
    font-family: var(--display-font-family);
    font-style: normal;
    font-size: 12px;
    letter-spacing: var(--extra-stretched-spacing);
    text-transform: uppercase;
    color: var(--muted-color);
}

@media screen and (max-width: 768px) {
    .prose blockquote, .article blockquote { font-size: 19px; }
}

/* Typography Helpers */
/* Site sizes past Bulma's scale. Use mobile-first after Bulma's sizes: is-size-2 is-size-1-tablet is-size-0-desktop. */
@media screen and (min-width: 1024px) {
    .is-size-0-desktop { font-size: 4.5rem !important; }
}

.is-family-display { font-family: var(--display-font-family) !important; }
.is-family-monospace { font-family: var(--mono-font-family) !important; }
.is-stretched { letter-spacing: var(--stretched-spacing); }
.is-extra-stretched { letter-spacing: var(--extra-stretched-spacing); }
.has-tight-leading { line-height: 1; }
.has-snug-leading { line-height: 1.2; }
.has-text-balanced { text-wrap: balance; }
.has-text-nowrap { white-space: nowrap; }

/* Spacing */
.px-gutter { padding-left: var(--gutter-x) !important; padding-right: var(--gutter-x) !important; }
.mx-gutter { margin-left: var(--gutter-x) !important; margin-right: var(--gutter-x) !important; }

/* Phone-only steps Bulma doesn't have; loaded after Bulma, they win on phones. */
@media screen and (max-width: 768px) {
    .pt-5-mobile { padding-top: 1.5rem !important; }
    .pb-5-mobile { padding-bottom: 1.5rem !important; }
    .px-5-mobile { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
}

/* Utilities */
/* Same weight as Bulma's display helpers but loaded later, so a hidden element stays hidden. */
[hidden] { display: none !important; }
.has-border { border: 2px solid var(--line-color); }
.has-border-top { border-top: 2px solid var(--line-color); }
.has-border-bottom { border-bottom: 2px solid var(--line-color); }
.has-rounded-corners { border-radius: var(--radius); }
.has-shadow { box-shadow: var(--cover-shadow); }
.has-min-width-0 { min-width: 0; }
.is-faded { opacity: .85; }

/* One-offs */
.deco { pointer-events: none; }
.deco.is-disc { background-color: var(--coral-color); opacity: .9; }
.deco.is-news-disc { right: 300px; top: -140px; width: 300px; height: 300px; }

@media screen and (max-width: 768px) {
    .deco.is-news-disc { right: -80px; top: -120px; width: 220px; height: 220px; }
}

.brand:hover { color: inherit; }
.atom { width: 46px; height: 46px; }
.atom i { position: absolute; inset: 0; border: 2px solid; border-radius: 50%; }
.atom i:nth-child(1) { border-color: var(--slate-color); transform: rotate(30deg) scaleX(.45); }
.atom i:nth-child(2) { border-color: var(--coral-color); transform: rotate(-30deg) scaleX(.45); }
.atom i:nth-child(3) { border-color: var(--ink-color); transform: rotate(90deg) scaleX(.45); }

.atom b {
    position: absolute;
    left: 18px;
    top: 18px;
    width: 10px;
    height: 10px;
    background-color: var(--coral-color);
    border-radius: 50%;
}

.wordmark-sub { font-size: 11px; }

@media screen and (max-width: 768px) {
    .atom { width: 34px; height: 34px; }
    .atom b { left: 13px; top: 13px; width: 8px; height: 8px; }
    .wordmark-sub { font-size: 9px; }
}

.nav-pill a { padding: 10px 20px; border-radius: 999px; }
.nav-pill a.is-active { background-color: var(--ink-color); color: var(--on-dark-color); }
.nav-pill a.is-active:hover { color: var(--on-dark-color); }
.nav-pill a.is-newsletter:hover { background-color: var(--coral-hover-color); color: var(--on-dark-color); }
.subscribe-mini:hover { color: var(--on-dark-color); }
.burger { width: 44px; height: 44px; }

.burger span {
    display: block;
    width: 16px;
    height: 2px;
    background-color: var(--ink-color);
    transition: transform .2s ease;
}

.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }
.mobile-menu { display: none; position: relative; z-index: 20; box-shadow: var(--card-shadow); }
.mobile-menu.is-open { display: block; }
.mobile-menu a { display: block; padding: 13px 22px; border-bottom: 1px solid var(--soft-color); }
.mobile-menu a:last-child { border-bottom: 0; }
.mobile-menu a.is-active { color: var(--coral-color); }
.nav-cells { grid-template-columns: repeat(3, 1fr); z-index: 5; }
.nav-cells a:not(:last-child) { border-right: 2px solid var(--line-color); }
.site-footer-links { max-width: 720px; }

@media screen and (max-width: 768px) {
    .site-footer { flex-direction: column; }
}

.latest-rack { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
/* The first of Latest Posts spans the rack: art on the left, the words on a dark starfield panel like the page bands. */
.lead-card { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
/* The art fills its row by grid stretching, not height: 100% — a percentage height in a grid row can keep its old size when the window is resized. */
.lead-card-art { min-height: 320px; border-right: 2px solid var(--line-color); }
.lead-card-art img { position: absolute; inset: 0; height: 100%; transition: transform .3s ease; }
.lead-card:hover .lead-card-art img { transform: scale(1.03); }
.lead-card-body { padding: 48px; }
/* Lift the copy above the starfield, which is absolutely positioned. */
.lead-card-body > :not(.hero-stars) { position: relative; }
/* The meta line's items center on one line, then wrap on phones; set here because Bulma's alignment helpers are !important. */
.lead-card-meta { align-items: center; }
.lead-card:focus-visible, .post-card:focus-visible { outline: 3px solid var(--coral-color); outline-offset: 4px; }
.post-card { display: flex; flex-direction: column; gap: 1rem; }
.post-card-body { display: flex; flex-direction: column; gap: .5rem; }
/* Each card takes four of the rack's rows (art, meta, title, blurb) as a subgrid, so titles line up across a row. Each rack holds one kind of card, so the meta track is either filled for the whole row (posts, dated) or empty and collapsed for the whole row (pages). The spacing is margins, not row-gap, because a gap would still sit around an empty track. */
@media screen and (min-width: 769px) {
    /* The rack's row gap would also open around those tracks, so the space between rows of cards is their top margin; the lead card always comes first. */
    .latest-rack { row-gap: 0; }
    .post-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; margin-top: 32px; }
    .post-card-body { display: contents; }
    .post-card-art { grid-row: 1; margin-bottom: 1rem; }
    .post-card-meta { grid-row: 2; margin-bottom: .5rem; }
    .post-card-title { grid-row: 3; }
    .post-card-summary { grid-row: 4; margin-top: .5rem; }
}
.post-card-art img { transition: transform .3s ease; }
.post-card:hover .post-card-art img { transform: scale(1.03); }

.post-card-summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.5;
}

/* A card or row with no thumbnail paints a small poster: a coral sun rising under a paper ring. The frame must hold no whitespace. */
.entry-art:empty::before, .post-card-art:empty::before, .lead-card-art:empty::before, .post-nav-art:empty::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -22%;
    height: 66%;
    aspect-ratio: 1 / 1;
    transform: translateX(-50%);
    background-color: var(--coral-color);
    border-radius: 50%;
}

.entry-art:empty::after, .post-card-art:empty::after, .lead-card-art:empty::after, .post-nav-art:empty::after {
    content: "";
    position: absolute;
    right: -24%;
    top: -24%;
    height: 72%;
    aspect-ratio: 1 / 1;
    border: 8px solid var(--paper-color);
    border-radius: 50%;
    opacity: .5;
}

.section-head-link { border-bottom: 2px solid var(--coral-color); }
.shelf-rack { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }

@media screen and (max-width: 1023px) {
    .lead-card-body { padding: 32px; }
    .shelf-rack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 768px) {
    .latest-rack { grid-template-columns: 1fr; gap: 32px; }
    /* The pages rack sits under the posts rack by the same gap as between cards; on tablet and up the cards' own top margin does this. */
    .latest-rack + .latest-rack { margin-top: 32px; }
    .lead-card { grid-template-columns: 1fr; }
    .lead-card-art { min-height: 0; aspect-ratio: 3 / 2; border-right: 0; border-bottom: 2px solid var(--line-color); }
    .lead-card-body { padding: 22px 22px 26px; }
    .lead-card-meta { flex-direction: column; align-items: flex-start; }
    .post-card { flex-direction: row; align-items: flex-start; }
    /* The art drops by the label's leading so its top meets the tops of the label's capitals. */
    .post-card-art { flex: none; width: 140px; margin-top: .35rem; }
    .shelf-rack { display: flex; gap: 16px; padding-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
    .shelf-rack::-webkit-scrollbar { display: none; }
    .shelf-book { width: 120px; }
}

.newsletter { grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; border-radius: 2rem; }
.newsletter p { max-width: 520px; }

@media screen and (max-width: 1023px) {
    .newsletter { grid-template-columns: 1fr; gap: 24px; }
}

.subscribe-form {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 22px;
    background-color: var(--paper-color);
    border-radius: 999px;
    color: var(--ink-color);
}

.subscribe-form input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    font: inherit;
    font-size: 17px;
    color: var(--ink-color);
}

.subscribe-form button {
    padding: 14px 24px;
    background-color: var(--coral-color);
    border-radius: 999px;
    font-family: var(--display-font-family);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: var(--stretched-spacing);
    text-transform: uppercase;
    color: var(--on-dark-color);
}

.subscribe-form button:hover { background-color: var(--coral-hover-color); }
/* The input drops its own outline to sit flush in the pill, so the pill shows focus. */
.subscribe-form:has(input:focus-visible) { outline: 3px solid var(--coral-color); outline-offset: 3px; }
.page-body .subscribe-form { width: 100%; max-width: 460px; border: 2px solid var(--line-color); }

@media screen and (max-width: 768px) {
    .subscribe-form { flex-wrap: wrap; padding: 14px; border-radius: 26px; }
    .subscribe-form input { flex: 1 0 100%; width: 100%; padding: 6px 8px; }
    .subscribe-form button { width: 100%; }
}

.page-body { max-width: 820px; padding-left: var(--gutter); padding-right: var(--gutter); }
.signal-stripes span { display: block; height: 6px; border-radius: 999px; }
.signal-stripes span:nth-child(1) { width: 100%; background-color: var(--coral-color); }
.signal-stripes span:nth-child(2) { width: 82%; background-color: var(--gold-color); }
.signal-stripes span:nth-child(3) { width: 64%; background-color: var(--slate-color); }

.entry {
    grid-template-columns: 148px minmax(0, 1fr) auto;
    align-items: center;
    gap: 32px;
    border-bottom: 2px dashed var(--soft-color);
}

.entry:last-child { border-bottom: 0; }
.entry:focus-visible { outline: 3px solid var(--coral-color); outline-offset: 4px; border-radius: 8px; }
.entry-art img { transition: transform .3s ease; }
.entry:hover .entry-art img { transform: scale(1.05); }
.entry-title { transition: color .15s ease; }
.entry:hover .entry-title { color: var(--coral-color); }
.entry-badge { top: -10px; left: -10px; min-width: 36px; height: 36px; line-height: 1; }

.entry-go {
    width: 48px;
    height: 48px;
    line-height: 1;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.entry:hover .entry-go {
    background-color: var(--coral-color);
    border-color: var(--coral-color);
    color: var(--on-dark-color);
    transform: translateX(4px);
}

@media screen and (max-width: 768px) {
    .entry { grid-template-columns: 84px minmax(0, 1fr); align-items: start; gap: 16px; }
    .entry-badge { top: -8px; left: -8px; min-width: 28px; height: 28px; }
}

.book-row {
    grid-template-columns: 176px minmax(0, 1fr);
    align-items: center;
    gap: 40px;
    border-bottom: 2px dashed var(--soft-color);
}

.book-row:last-child { border-bottom: 0; }
.book-row-cover { transition: transform .2s ease; }
.book-row-cover:hover { transform: translateY(-4px); }
.book-row-tagline { max-width: 520px; }
.book-row-cta:hover { background-color: var(--ink-hover-color); color: var(--on-dark-color); }

@media screen and (max-width: 768px) {
    .book-row { grid-template-columns: 104px minmax(0, 1fr); align-items: start; gap: 18px; }
}

/* Single book: a dark band carries the cover, title, lead and blurb; the buy panel straddles its lower edge. */
.book-hero {
    padding: 56px var(--gutter-x) 136px;
    border-top: 2px solid var(--line-color);
    border-bottom: 2px solid var(--line-color);
}

.book-hero-inner { grid-template-columns: 300px minmax(0, 1fr); gap: 56px; align-items: start; }

.book-panel-cover {
    width: 300px;
    max-width: 100%;
    border: 6px solid var(--paper-color);
    box-shadow: 0 40px 60px -24px rgba(0, 0, 0, .8);
}

.book-copy { max-width: 600px; }
.book-copy { color: #E3E6E3; }
.book-copy p a { text-decoration-color: var(--sky-color); }
.book-hero .hero-planet {
    --planet-color: var(--sky-color);
    --planet-shadow: var(--slate-color);
    --ring-color: var(--mint-color);
    right: 40px;
    top: 28px;
    width: 280px;
    height: 175px;
}
/* A long title stays clear of the planet. */
.book-hero h1 { padding-right: 240px; }

/* A quote at the end of the blurb reads as a pull quote on the band, not a mint card. */
.book-copy blockquote {
    padding: 0 0 0 20px;
    background: none;
    border-left: 4px solid var(--coral-color);
    border-radius: 0;
    font-size: inherit;
    line-height: inherit;
    color: var(--sky-color);
}

.book-copy blockquote cite { color: var(--mint-color); }

.book-buy {
    margin: -80px var(--gutter-x) 0;
    background-color: var(--paper-color);
    box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .6);
}

.book-buy-lead { flex: 1 1 380px; }
.book-buy-lead p { max-width: 360px; }
.book-buy-lead h2 { color: var(--on-dark-color); }
.buy-lead-link:hover { background-color: var(--coral-hover-color); color: var(--on-dark-color); }
.book-buy-retailers { flex: 1 1 320px; border-left: 2px solid var(--line-color); }
.book-buy-retailers .retailers-head { border-bottom: 1px solid var(--soft-color); }
.retailers { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.retailers a { border-bottom: 1px solid var(--soft-color); }
.retailers a:hover { background-color: var(--soft-color); color: var(--ink-color); }
/* A book with no purchase links at all renders no buy panel; it outranks the panel's own is-flex. */
.book-buy:not(:has(a)) { display: none !important; }
/* The newsletter band needs air under the also-by strip. */
.book-page + .newsletter { margin-top: 56px; }
.book-after { padding-left: var(--gutter-x); padding-right: var(--gutter-x); }
.also-by-item { width: 140px; }

@media screen and (max-width: 1023px) {
    .book-hero-inner { grid-template-columns: 1fr; gap: 32px; }
    .book-buy-lead + .book-buy-retailers { border-left: 0; border-top: 2px solid var(--line-color); }
}

@media screen and (max-width: 768px) {
    .book-hero { padding-bottom: 112px; }
    .book-hero h1 { padding-right: 0; }
    .book-hero .hero-planet { right: 12px; top: 12px; width: 200px; height: 125px; }
    .book-panel-cover { width: 240px; }
    .also-by-item { width: 96px; }
}

/* Nexus pages: the newsletter card at full size. */
.nexus-page {
    min-height: 560px;
    padding-top: 96px;
    padding-bottom: 112px;
    border-top: 2px solid var(--line-color);
    border-bottom: 2px solid var(--line-color);
}

.nexus-body { max-width: 680px; }
.nexus-body .prose { --stack-gap: 1.25rem; }
.nexus-body .prose p { color: var(--on-dark-color); }
.nexus-body .prose cite { display: block; max-width: 480px; font-family: var(--mono-font-family); font-style: normal; font-size: 12px; line-height: 1.6; color: var(--sky-color); }
.nexus-body .subscribe-form { width: 100%; max-width: 520px; margin-top: 8px; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .7); }

/* The centered title runs into the full-size planet well before phone widths. */
@media screen and (max-width: 1215px) {
    .nexus-page .hero-planet { right: 24px; top: 24px; width: 200px; height: 125px; }
}

@media screen and (max-width: 768px) {
    .nexus-page { min-height: 0; padding-top: 88px; padding-bottom: 64px; }
    .nexus-page .hero-planet { right: 12px; top: 12px; width: 150px; height: 94px; }
}

.article-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; }

@media screen and (max-width: 1023px) {
    .article-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
.part-nav, .post-nav { grid-template-columns: 1fr 1fr; }
/* A lone next link keeps to the right half, a lone previous link to the left. */
.part-nav .is-next, .post-nav .is-next { grid-column: 2; }
.part-nav .is-next { border-color: var(--coral-color); }
.part-nav .is-next:hover { color: var(--on-dark-color); }
/* Previous/next with neither neighbour renders nothing; it outranks the nav's own is-grid. */
.part-nav:not(:has(a)), .post-nav:not(:has(a)) { display: none !important; }
.series-card, .toc-card { top: 1.5rem; }
.progress-track { height: 6px; background-color: rgba(255, 255, 255, .25); }
.progress-track i { display: block; width: var(--progress, 0%); height: 100%; background-color: var(--coral-color); }
.parts-list li { border-radius: 12px; line-height: 1.35; color: var(--muted-color); }

.parts-list li > * {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 11px 14px;
}

.parts-list li:not(.is-current):hover { background-color: var(--soft-color); }
.parts-list li.is-done { color: var(--ink-color); }
.parts-list li.is-current { background-color: var(--coral-color); font-weight: 700; color: var(--on-dark-color); }
.parts-list li.is-current a:hover { color: var(--on-dark-color); }
.parts-list .n { width: 20px; opacity: .75; }
.series-bar-parts { display: none; }
.series-bar-parts.is-open { display: block; }
.series-bar-parts li { border-bottom: 1px solid rgba(255, 255, 255, .18); opacity: .8; }
.series-bar-parts li > * { display: flex; gap: 10px; padding: 9px 0; }
.series-bar-parts li:last-child { border-bottom: 0; }
.series-bar-parts li.is-current { opacity: 1; font-weight: 700; color: var(--coral-color); }
.toc-list li { display: flex; gap: 10px; line-height: 1.35; color: var(--muted-color); }

.toc-list li .n {
    flex: none;
    width: 22px;
    padding-top: 3px;
    font-family: var(--display-font-family);
    font-size: 11px;
    letter-spacing: var(--stretched-spacing);
    color: var(--coral-color);
}

.toc-list li.is-current { font-weight: 700; color: var(--ink-color); }
.toc-list li a { display: block; }
/* The dark band that opens every page but the index pages. Copy centered, or
   split with the feature image on the right. Stars on all of them; the ringed
   planet only where a band asks for it (books, the Nexus pages). */
.hero {
    padding: 48px var(--gutter-x) 56px;
    border-top: 2px solid var(--line-color);
    border-bottom: 2px solid var(--line-color);
}

.hero-copy { gap: 14px; align-items: center; text-align: center; }
.hero-copy h1 { max-width: 900px; }
.hero-copy p { max-width: 680px; }
.hero.is-split .hero-inner { display: flex; align-items: center; gap: 56px; }
.hero.is-split .hero-copy { flex: 1 1 420px; min-width: 0; align-items: flex-start; text-align: left; }
.hero.is-split .hero-copy p { max-width: 560px; }
/* A band with a picture stays short enough that the page starts above the fold. */
.hero.is-split { padding-top: 40px; padding-bottom: 44px; }
@media screen and (min-width: 1024px) {
    .hero.is-split .hero-copy h1 { font-size: 3.5rem !important; }
}
.hero-art { flex: 1 1 400px; max-width: 480px; margin: 0; }
.hero-art .image { border: 6px solid var(--paper-color); border-radius: 6px; box-shadow: 0 40px 60px -24px rgba(0, 0, 0, .8); }
.hero-art img { object-position: var(--art-focus, center); }
.hero-stars { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--on-dark-color); pointer-events: none; }

.hero-planet {
    --planet-color: var(--coral-color);
    --planet-shadow: var(--ink-color);
    --ring-color: var(--sky-color);
    position: absolute;
    right: 72px;
    top: 36px;
    width: 320px;
    height: 200px;
    pointer-events: none;
}

.planet-body { fill: var(--planet-color); }
.planet-shadow { fill: var(--planet-shadow); }
.planet-ring { stroke: var(--ring-color); }

/* The series bar inside a part's band on a phone. */
.series-bar { border-bottom: 1px solid rgba(251, 250, 246, .2); margin-bottom: 20px; }

/* One column: the copy and the picture both center, like a band with no picture. */
@media screen and (max-width: 1023px) {
    .hero.is-split .hero-inner { flex-direction: column; gap: 32px; }
    /* The column bases become heights once stacked; let both size to their content. */
    .hero.is-split .hero-copy, .hero.is-split .hero-art { flex: 0 0 auto; }
    .hero.is-split .hero-copy { align-items: center; text-align: center; }
    .hero.is-split .hero-copy p { max-width: 680px; }
    .hero-art { width: 100%; }
    .hero-art figcaption { text-align: center; }
}

@media screen and (max-width: 768px) {
    .hero, .hero.is-split { padding-top: 32px; padding-bottom: 40px; }
    .hero-planet { right: 12px; top: 12px; width: 180px; height: 112px; }
}

.essay-body { max-width: 700px; }
.byline-avatar { width: 44px; height: 44px; }
.filed-under span + span::before { content: " · "; color: var(--muted-color); }
.post-nav-art { width: 96px; }

@media screen and (max-width: 768px) {
    .post-nav { grid-template-columns: 1fr; }
    .post-nav .is-next { grid-column: auto; }
}

.video-frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-image: linear-gradient(180deg, var(--sky-color), var(--mint-color));
    border: 2px solid var(--line-color);
    border-radius: 24px;
}

.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

.video-frame-play {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    background-color: var(--coral-color);
    border-radius: 50%;
    box-shadow: 0 14px 30px -10px rgba(31, 43, 51, .6);
}

.video-frame-play i {
    width: 0;
    height: 0;
    margin-left: 6px;
    border-left: 22px solid #F6EFDF;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
}

.video-frame-note {
    position: absolute;
    left: 18px;
    bottom: 14px;
    font-family: var(--mono-font-family);
    font-size: 11px;
    color: var(--slate-color);
}

.equation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 22px 28px;
    background-color: var(--paper-color);
    border: 2px solid var(--line-color);
    border-radius: 18px;
    font-family: var(--math-font-family);
    font-size: 24px;
}

.equation-no { flex: none; font-family: var(--mono-font-family); font-size: 11px; color: var(--muted-color); }
.equation sub { font-size: 14px; }
.equation .sum { margin: 0 4px; font-size: 32px; vertical-align: -6px; }

.dropcap {
    float: left;
    padding: 6px 14px 0 0;
    font-family: var(--display-font-family);
    font-weight: 700;
    font-size: 84px;
    line-height: .8;
    color: var(--coral-color);
}

.booklist { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; }
.booklist img { width: 112px; border-radius: 4px; box-shadow: var(--cover-shadow); }
.profile-links { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.profile-links i { margin-right: 10px; font-size: 1.1em; }
.profile-links .fa-orcid { color: #A5CD3A; }

@media screen and (max-width: 768px) {
    .video-frame { border-radius: 16px; }
    .equation { justify-content: center; padding: 16px 18px; border-radius: 14px; font-size: 19px; text-align: center; }
    .equation-no { display: none; }
    .dropcap { font-size: 62px; }
    .booklist img { width: 84px; }
}