/* Sections: topic bar, home tiles and section colours.
   Hand-written (not part of the gulp build); linked from default.hbs. */
.sec-essays      { --sec: #e95420; }
.sec-ai-research { --sec: #4f8cff; }
.sec-longevity   { --sec: #35b98a; }
.sec-science     { --sec: #a87cff; }
.sec-energy      { --sec: #e8b931; }
.sec-guides      { --sec: #3fc1d6; }

.section-bar { margin: 10px 0 30px; }
.section-bar-inner {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.section-chip {
    padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
    border: 1px solid var(--sec, var(--dark-mode-border-color));
    color: inherit; white-space: nowrap;
}
.section-chip:hover { opacity: 1; background: color-mix(in srgb, var(--sec, #888) 18%, transparent); }
.section-chip.is-current { background: var(--sec, var(--primary-color)); color: #111 !important; }
.section-chip.section-all.is-current { color: #fff !important; }

.section-tiles { margin-bottom: 60px; }
.section-tiles-grid {
    display: grid; gap: 24px;
    grid-template-columns: repeat(3, 1fr);
}
.section-tile {
    display: flex; flex-direction: column; overflow: hidden; border-radius: 10px;
    border-top: 4px solid var(--sec);
    background: var(--light-gray-color); color: inherit;
}
.dark-mode .section-tile { background: var(--dark-mode-darker-bg-color); }
.section-tile:hover { opacity: 1; transform: translateY(-2px); transition: transform .15s; }
.section-tile-media { order: -1; background: color-mix(in srgb, var(--sec) 25%, transparent); }
.section-tile-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.section-tile-name { font-size: 22px; font-weight: 800; color: var(--sec) !important; margin: 0; }
.section-tile-desc { font-size: 15px; line-height: 1.45; margin: 0; }
.section-tile-latest { font-size: 14px; line-height: 1.4; margin: 0; opacity: .85; }
.section-tile-latest span {
    display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; opacity: .7;
}
.section-tile-count { margin: auto 0 0; font-size: 13px; font-weight: 700; color: var(--sec); }

.section-feed-title {
    margin: 0 0 30px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    opacity: .7; margin-bottom: 30px;
}
.section-head { margin-bottom: 70px; }
.section-head-name { color: var(--sec) !important; font-size: 40px; font-weight: 800; margin: 0 0 10px; }
.section-head-desc { font-size: 17px; line-height: 1.5; opacity: .8; margin: 0; }
.section-empty { opacity: .7; }

/* Section label on cards and posts. */
.post-tag[class*="post-tag-"] { color: var(--sec, inherit) !important; }
.post-tag-essays      { --sec: #e95420; }
.post-tag-ai-research { --sec: #4f8cff; }
.post-tag-longevity   { --sec: #35b98a; }
.post-tag-science     { --sec: #a87cff; }
.post-tag-energy      { --sec: #e8b931; }
.post-tag-guides      { --sec: #3fc1d6; }

@media (max-width: 960px) {
    .section-tiles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .section-bar-inner { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .section-bar-inner::-webkit-scrollbar { display: none; }
    .section-tiles-grid { grid-template-columns: 1fr; gap: 14px; }
    .section-tile-desc, .section-tile-media { display: none; }
    .section-head-name { font-size: 32px; }
}

/* Tables in dark mode: the shared Ghost theme CSS paints the header row and the
   edge fades of scrolling tables white; Alto never overrides them. */
.dark-mode .gh-content table:not(.gist table) th {
    background-color: var(--dark-mode-darker-bg-color);
    color: var(--dark-mode-secondary-text-color);
}
.dark-mode .gh-content table:not(.gist table) td,
.dark-mode .gh-content table:not(.gist table) th {
    border-color: var(--dark-mode-border-color);
}
.dark-mode .gh-content table:not(.gist table) td:first-child {
    background-image: linear-gradient(90deg, var(--dark-mode-bg-color) 50%, rgba(40, 44, 53, 0));
}
.dark-mode .gh-content table:not(.gist table) td:last-child {
    background-image: linear-gradient(270deg, var(--dark-mode-bg-color) 50%, rgba(40, 44, 53, 0));
}
.dark-mode .gh-content table:not(.gist table) {
    background: radial-gradient(ellipse at left, rgba(0, 0, 0, .6) 0, transparent 75%) 0,
                radial-gradient(ellipse at right, rgba(0, 0, 0, .6) 0, transparent 75%) 100%;
    background-attachment: scroll, scroll;
    background-repeat: no-repeat;
    background-size: 10px 100%, 10px 100%;
}
/* Native scrollbars (tables, code) follow the theme. */
html.dark-mode { color-scheme: dark; }
/* Wrap cells on wide screens so a table fits the column instead of hiding its
   last column behind a scroll; phones keep the horizontal scroll. */
@media (min-width: 768px) {
    .gh-content table:not(.gist table) { white-space: normal; }
    .gh-content table:not(.gist table) td,
    .gh-content table:not(.gist table) th { min-width: 6em; }
}
/* Break table cells only between words (hyphenating long ones), never mid-word. */
.gh-content table:not(.gist table) td,
.gh-content table:not(.gist table) th { word-break: normal; overflow-wrap: normal; hyphens: auto; }
.dark-mode .gh-content table:not(.gist table) { scrollbar-color: var(--dark-mode-border-color) transparent; }