/* ericlinder.com: one site, one look (AUT-379, 2026-10-29).
   Loaded after style.css (the home page's design) on every page. It adds only
   what the home page never needed: the shared footer, the reading text of posts
   and pages, the blog cards without a picture, and the sign-up forms. Tokens are
   style.css's own; nothing here introduces a new colour or font. */

/* The footer sits under the two columns, never beside them (it used to be a
   third flex column at 1250px and up, squeezing the sidebar). */
.site-footer {
    text-align: center;
    padding: 0 1rem 2rem;
    font-family: var(--ff-poppins);
    font-size: var(--fs7);
    color: var(--light-gray70);
}
.site-footer a { display: inline; color: inherit; text-decoration: underline; }
.site-footer a:hover { color: var(--orange-yellow-crayola); }
@media (max-width: 767px) {
    /* clear the fixed bottom menu on phones */
    .site-footer { padding-bottom: 90px; }
}

.info-content .name a { display: inline; color: inherit; }

/* Links inside running text stay in the line (style.css makes every <a> a block). */
.about-text a, .post-body a, .post-meta a { display: inline; }

/* Every page uses the home page's menu; links and buttons look the same. */
a.navbar-link { display: block; }

/* A page or a post, in the home page's article card */
.page-article .back-link {
    display: inline-block;
    color: var(--orange-yellow-crayola);
    font-size: var(--fs6);
    margin-bottom: 18px;
}
.page-article .back-link:hover { color: var(--vegas-gold); }
.page-article .article-title { line-height: 1.3; }

.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 10px;
    color: var(--light-gray70);
    font-size: var(--fs7);
    margin: -10px 0 26px;
}
.post-meta .dot {
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background: var(--light-gray70);
}
.post-meta .updated { display: inline; }
.post-meta .updated time { display: inline; }
.post-meta .updated::before { content: '\00B7'; margin-right: 10px; }

.post-body {
    color: var(--light-gray);
    font-size: var(--fs5);
    font-weight: var(--fw300);
    line-height: 1.75;
    max-width: 720px;
}
.post-body p, .post-body ul, .post-body ol, .post-body blockquote, .post-body table, .post-body pre { margin-bottom: 1.35em; }
.post-body h2 { color: var(--white2); font-size: var(--fs2); font-weight: var(--fw500); line-height: 1.4; margin: 1.6em 0 .7em; }
.post-body h3 { color: var(--white2); font-size: var(--fs3); font-weight: var(--fw500); margin: 1.4em 0 .6em; }
.post-body strong { color: var(--white2); font-weight: var(--fw500); }
.post-body a { color: var(--orange-yellow-crayola); text-underline-offset: 3px; }
.post-body a:hover { text-decoration: underline; }
.post-body ul, .post-body ol { padding-left: 1.4em; }
.post-body ul li { list-style: disc; }
.post-body ol li { list-style: decimal; }
.post-body li { margin-bottom: .45em; }
.post-body li::marker { color: var(--orange-yellow-crayola); }
.post-body blockquote, .post-body .post-quote {
    background: var(--eerie-black1);
    border-left: 4px solid var(--orange-yellow-crayola);
    border-radius: 8px;
    padding: 14px 18px;
    color: var(--white2);
}
.post-body .post-quote { font-family: monospace; font-size: var(--fs6); margin-bottom: 1.35em; overflow-wrap: break-word; }
.post-body code { font-size: .92em; background: var(--eerie-black1); border-radius: 4px; padding: 1px 5px; }
.post-body hr { border: 0; border-top: 1px solid var(--jet); margin: 2em 0; }
.post-body img { max-width: 100%; height: auto; border-radius: 14px; }
.post-body table { width: 100%; border-collapse: collapse; font-size: var(--fs6); display: block; overflow-x: auto; }
.post-body th, .post-body td { border-bottom: 1px solid var(--jet); padding: 8px 10px; text-align: left; vertical-align: top; }
.post-body th { color: var(--white2); font-weight: var(--fw500); }
.post-body em { font-style: italic; }
.post-body .post-video { width: 100%; max-width: 400px; display: block; margin: 0 auto 2em; border-radius: 14px; border: 1px solid var(--jet); }
.post-body .post-note { border-top: 1px solid var(--jet); margin-top: 2.2em; padding-top: 1.4em; color: var(--light-gray70); font-size: var(--fs7); font-style: italic; }

/* The most-important-man page's own pieces, in the house colours */
.mim .answer { font-size: var(--fs3); color: var(--white2); border-left: 3px solid var(--orange-yellow-crayola); padding-left: 18px; }
.mim .challenge { background: var(--eerie-black1); border: 1px solid var(--jet); border-radius: 14px; padding: 20px 22px; margin: 2em 0; }
.mim .challenge p:last-child { margin-bottom: 0; }
.mim .meta { color: var(--light-gray70); font-size: var(--fs7); margin-top: 2.4em; }

/* Blog cards: a post without a picture keeps the card, text only */
.blog-post-item.no-image > a { padding-top: 6px; }
.blog-post-item time { display: inline; }
.blog-posts { margin-bottom: 40px; }

/* Sign-up boxes (blog index, briefing) in the contact form's style */
.subscribe { border-top: 1px solid var(--jet); padding-top: 30px; }
.subscribe .subscribe-lede { color: var(--light-gray70); font-size: var(--fs6); margin: -10px 0 18px; }
.subscribe .input-wrapper { grid-template-columns: 1fr; margin-bottom: 18px; }
#subscribe-msg, .briefing #msg { color: var(--light-gray); font-size: var(--fs6); margin-top: 14px; }
#subscribe-msg:empty, .briefing #msg:empty { display: none; }

.briefing .lede { font-size: var(--fs4); color: var(--white2); }
.briefing form { display: grid; gap: 10px; margin-top: 1.5rem; max-width: 520px; }
.briefing label { color: var(--white2); font-weight: var(--fw500); font-size: var(--fs6); }
.briefing input {
    color: var(--white2);
    font-size: var(--fs6);
    padding: 13px 20px;
    border: 1px solid var(--jet);
    border-radius: 14px;
    outline: none;
}
.briefing input:focus { border-color: var(--orange-yellow-crayola); }
.briefing .hint { margin: -4px 0 6px; color: var(--light-gray70); font-size: var(--fs7); }
.briefing .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.briefing button {
    justify-self: start;
    background: var(--border-gradient-onyx);
    color: var(--orange-yellow-crayola);
    padding: 13px 22px;
    border-radius: 14px;
    font-size: var(--fs6);
    box-shadow: var(--shadow3);
    position: relative;
    z-index: 1;
}
.briefing button::before {
    content: "";
    position: absolute;
    inset: 1px;
    background: var(--bg-gradient-jet);
    border-radius: inherit;
    z-index: -1;
}
.briefing button[disabled] { opacity: .6; cursor: default; }
.briefing .small { color: var(--light-gray70); font-size: var(--fs7); margin-top: 2rem; }

/* Headlines keep their own capitals: style.css capitalizes every word, which
   would rewrite an approved headline ("What Changes In November"). */
.page-article .article-title, .blog .article-title, .blog-item-title, .subscribe .form-title { text-transform: none; }
.post-body a { overflow-wrap: anywhere; }

/* On wide screens the menu sits in the card's top-right corner; a page whose
   headline comes first starts below it so a long title never runs under it. */
@media (min-width: 1024px) {
    .page-article > header:first-child { padding-top: 56px; }
}

/* Fixed sizes for the reading text: style.css re-scales its --fs steps at wider
   screens (--fs3 grows past --fs2), which would put h3 above h2. */
.post-body h2 { font-size: 20px; }
.post-body h3, .mim .faq h3 { font-size: 17px; }
.mim .answer { font-size: 18px; line-height: 1.6; }