/* ==========================================================================
   THE TILTED EARTH -- blog, newsletters, accounts and admin
   ==========================================================================

   style.css is deliberately NOT edited by this project. Everything added for
   the blog and newsletters lives here, so the homepage design cannot be broken
   by this work. All colours come from the custom properties already defined
   in style.css (--bg, --panel, --ink, --muted, --line, --orange).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. MOVED OUT OF index.html
   These were in an inline <style> block in the head. They are page-specific,
   so they did not belong in a shared header -- and an inline style block would
   have forced a weaker Content-Security-Policy on every page.
   -------------------------------------------------------------------------- */
.world-map { margin-top: 90px }
.world-map-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 28px; flex-wrap: wrap }
.world-map-head p:last-child { max-width: 430px; color: var(--muted); margin: 0 }
.world-map figure { margin: 0; border: 1px solid var(--line); background: var(--panel); padding: 10px }
.world-map img { height: auto; object-fit: contain }
.world-map figcaption { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .72rem; letter-spacing: .12em; color: #95a69a; padding: 14px 4px 4px }
@media (max-width: 760px) { .world-map { margin-top: 60px } }


/* --------------------------------------------------------------------------
   2. MASTHEAD ON INTERIOR PAGES
   .header is position:absolute so it can float over the hero image. Interior
   pages have no hero behind it, so they need a solid bar that takes up space.
   -------------------------------------------------------------------------- */
.header--solid {
  position: relative;
  background: #0d1615;
  border-bottom: 1px solid var(--line);
}


/* --------------------------------------------------------------------------
   3. NAVIGATION, WIDE AND NARROW
   The original stylesheet hides every non-CTA nav link below 760px. With Blog
   and Newsletters added, that would have left phone visitors unable to reach
   either new section at all. Below 1050px the links move into a <details>
   disclosure instead -- a disclosure, not a script, so that public pages keep
   their "script-src 'none'" policy.
   -------------------------------------------------------------------------- */
.nav-wide { display: flex; align-items: center; gap: 26px; font-size: .88rem }
.nav-wide > a { transition: color .2s }
.nav-wide > a:hover { color: var(--orange) }
.nav-narrow { display: none }

.badge {
  display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 6px;
  background: var(--orange); color: #16211d;
  border-radius: 10px; font-size: .7rem; font-weight: 700; text-align: center;
}

/* An awaiting-approval marker is a state, not a count: it must not read as the
   admin moderation badge, which is a call to action in the same place. */
.badge-wait {
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); font-weight: 500; letter-spacing: .02em;
}

@media (max-width: 1180px) { .nav-wide { gap: 18px; font-size: .84rem } }

@media (max-width: 1050px) {
  .nav-wide { display: none }
  .nav-narrow { display: block; position: relative }

  .nav-narrow > summary {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 16px; border: 1px solid #9aa49a70;
    font-size: .85rem; font-weight: 600; letter-spacing: .04em; cursor: pointer;
  }
  .nav-narrow > summary:hover { color: var(--orange) }
  .burger { width: 17px; height: 9px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor }
  .nav-narrow[open] > summary { color: var(--orange); border-color: var(--orange) }

  /* Specificity here is intentional: it must outrank
     ".header nav>a:not(.nav-cta){display:none}" in style.css. */
  .header .nav-narrow nav {
    position: absolute; right: 0; top: calc(100% + 13px);
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    min-width: 240px; z-index: 9;
    background: #0d1615; border: 1px solid var(--line);
    box-shadow: 0 20px 44px #000a;
  }
  .header .nav-narrow nav > a {
    display: block; padding: 13px 18px; font-size: .92rem;
    border-bottom: 1px solid #26302c;
  }
  .header .nav-narrow nav > a:last-child { border-bottom: 0 }
  .header .nav-narrow nav > a:hover { background: #16211f; color: var(--orange) }
  .header .nav-narrow nav > a.nav-cta {
    border: 0; margin: 6px; padding: 13px 18px;
    background: var(--orange); color: #18221d; font-weight: 700; text-align: center;
  }
  .header .nav-narrow nav > a.nav-cta span { margin-left: 8px }
}


/* --------------------------------------------------------------------------
   4. PAGE SHELL
   -------------------------------------------------------------------------- */
.page-head { margin-bottom: 46px }
.page-title { font-family: var(--display); font-size: clamp(2.8rem, 6vw, 4.6rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.04; margin: 0 }
.sub-title { font-family: var(--display); font-size: 1.9rem; font-weight: 600; margin: 48px 0 18px }
.lede { color: var(--muted); max-width: 640px; font-size: 1.04rem; margin-top: 18px }
.prose-page { max-width: 820px }
.meta { font-size: .76rem; letter-spacing: .12em; color: #95a69a; text-transform: uppercase }
.meta a { border-bottom: 1px solid #4c5b53 }
.meta a:hover { color: var(--orange) }
.empty { color: var(--muted); border: 1px dashed var(--line); padding: 38px 30px; text-align: center }


/* --------------------------------------------------------------------------
   5. BLOG
   -------------------------------------------------------------------------- */
.post-list { display: grid; gap: 0; border-top: 1px solid var(--line) }
.post-card { padding: 30px 0; border-bottom: 1px solid var(--line) }
.post-card h2 { font-size: clamp(1.8rem, 3.1vw, 2.6rem); margin: 12px 0 14px }
.post-card h2 a:hover { color: var(--orange) }
.post-card p { color: var(--muted); margin: 0 0 14px; max-width: 760px }
.post-card .meta { display: flex; flex-wrap: wrap; gap: 8px 20px }

.post-header { border-bottom: 1px solid var(--line); padding-bottom: 28px; margin-bottom: 34px }
.post-header .page-title { margin-bottom: 18px }

/* Author prose. Deliberately constrained: this is the only place on the site
   where HTML written by someone other than the owner is rendered, and the
   sanitizer permits exactly the tags styled below. */
.post-body { max-width: 760px; font-size: 1.06rem }
.post-body > :first-child { margin-top: 0 }
.post-body p { margin: 0 0 1.3rem }
.post-body h2 { font-family: var(--display); font-size: 2.1rem; margin: 2.4rem 0 1rem }
.post-body h3 { font-size: 1.5rem; margin: 2rem 0 .8rem }
.post-body a { color: var(--orange); border-bottom: 1px solid #8a5f4a }
.post-body a:hover { border-bottom-color: var(--orange) }
.post-body ul, .post-body ol { margin: 0 0 1.3rem; padding-left: 1.3rem; color: var(--ink) }
.post-body li { margin-bottom: .5rem }
.post-body blockquote {
  margin: 1.8rem 0; padding: 4px 0 4px 22px;
  border-left: 2px solid var(--orange); color: #c6d0c6; font-style: italic;
}
.post-body blockquote p:last-child { margin-bottom: 0 }
.post-body pre { background: var(--panel); border: 1px solid var(--line); padding: 16px; overflow-x: auto; font-size: .9rem }
.post-body code { font-size: .92em; background: #1d2825; padding: 1px 5px }
.post-body pre code { background: none; padding: 0 }
.post-body img { height: auto; margin: 1.8rem 0; border: 1px solid var(--line) }
.post-body figure { margin: 1.8rem 0 }
.post-body figcaption { font-size: .8rem; color: #95a69a; letter-spacing: .06em; padding-top: 10px }
.post-body del { color: #8d9a91 }


/* --------------------------------------------------------------------------
   6. COMMENTS
   -------------------------------------------------------------------------- */
.comments { max-width: 760px; margin-top: 70px; border-top: 1px solid var(--line); padding-top: 34px }
.comment-list { list-style: none; margin: 30px 0 0; padding: 0 }
.comment { border-top: 1px solid #2a3531; padding: 22px 0 }
.comment:first-child { border-top: 0 }
.comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-bottom: 10px }
.comment-who { font-weight: 600 }
.comment-who .role-tag { font-size: .66rem; letter-spacing: .12em; color: var(--orange); border: 1px solid #6b4836; padding: 1px 6px; margin-left: 8px; text-transform: uppercase }
.comment-body { color: #cfd8cf }
.comment-body p { margin: 0 0 .8rem }
.comment-body p:last-child { margin-bottom: 0 }
.comment-mod { margin-top: 10px }
.comment-hidden { opacity: .55 }

.signin-prompt { border: 1px solid var(--line); background: var(--panel); padding: 26px 28px; color: var(--muted) }
.signin-prompt a { color: var(--orange); border-bottom: 1px solid #8a5f4a }


/* --------------------------------------------------------------------------
   7. NEWSLETTERS
   -------------------------------------------------------------------------- */
.nl-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line) }
.nl-item { display: grid; grid-template-columns: 150px 1fr auto; gap: 10px 30px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--line) }
.nl-date { font-family: var(--display); font-size: 1.25rem; color: #a4b7a9; letter-spacing: .03em; padding-top: 2px }
.nl-main h2 { font-size: 1.65rem; margin: 0 0 10px }
.nl-main h2 a:hover { color: var(--orange) }
.nl-main p { color: var(--muted); margin: 0; max-width: 640px }
.nl-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; white-space: nowrap }
.pdf-link { display: inline-flex; align-items: center; gap: 12px; border: 1px solid #7d8c6e; padding: 9px 15px; font-size: .84rem }
.pdf-link:hover { background: #2a3a28; color: var(--ink) }
.pdf-size { font-size: .72rem; color: #8b9a8d; letter-spacing: .08em }

.signup-box { margin-top: 56px; border: 1px solid #3c4d3f; background: #1b2722; padding: 32px 34px }
.signup-box h2 { font-family: var(--display); font-size: 2.1rem; margin: 0 0 12px }
.signup-box p { color: var(--muted); max-width: 540px; margin: 0 }
.signup-form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px }
.signup-form input[type=email] { flex: 1 1 260px; min-width: 0 }

/* Band variant: used on the homepage and under each blog post, where the
   signup sits as a full-width strip rather than a panel inside a section. */
.signup-box--band {
  margin-top: 0; border-left: 0; border-right: 0;
  background: #1a2521;
  padding: 44px max(28px, calc((100% - 1280px) / 2 + 56px));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px 60px; align-items: center;
}
.signup-box--band .signup-copy h2 { font-size: 2.4rem; letter-spacing: -.01em }
.signup-box--band .signup-form { margin-top: 0 }
@media (max-width: 980px) {
  .signup-box--band { grid-template-columns: 1fr; padding: 36px 20px; gap: 22px }
  .signup-box--band .signup-copy h2 { font-size: 2rem }
}

@media (max-width: 760px) {
  .nl-item { grid-template-columns: 1fr; gap: 12px }
  .nl-actions { align-items: flex-start }
}


/* --------------------------------------------------------------------------
   8. FORMS
   -------------------------------------------------------------------------- */
.form { max-width: 560px; margin-top: 26px }
.form-wide { max-width: none }
.field { display: block; margin: 0 0 22px }
.field > label { display: block; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: #c3cdbc; margin-bottom: 9px }
.field > small { display: block; margin-top: 8px; font-size: .84rem; color: #95a69a }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=file], textarea, select {
  width: 100%; padding: 13px 14px;
  background: #0e1716; color: var(--ink);
  border: 1px solid var(--line); border-radius: 0;
  font-family: var(--font); font-size: 1rem; line-height: 1.5;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--orange); outline-offset: 2px; border-color: var(--orange) }
textarea { min-height: 150px; resize: vertical }
input[type=file] { padding: 10px; background: var(--panel) }
input[type=checkbox] { width: auto; margin-right: 10px; accent-color: var(--orange) }
.field-inline { display: flex; align-items: center; gap: 4px }
.field-inline label { text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--ink); margin: 0 }

button.button, .button { border: 0; cursor: pointer; font-family: var(--font) }
.button:disabled { opacity: .5; cursor: not-allowed }
.button-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 30px }
.button-small { padding: 9px 15px; font-size: .82rem; gap: 10px }
.button-quiet {
  background: transparent; color: #c3cdbc; border: 1px solid var(--line);
  padding: 9px 15px; font-size: .82rem; font-weight: 500; cursor: pointer;
  font-family: var(--font);
}
.button-quiet:hover { border-color: var(--orange); color: var(--orange); background: transparent; transform: none }
.button-danger { border-color: #7a3c33; color: #e59d8c }
.button-danger:hover { border-color: #c0573f; color: #ffb49d }

.note { padding: 15px 18px; margin: 0 0 20px; font-size: .94rem; border-left: 3px solid }
.note--ok { background: #1a2a20; border-color: #68a070; color: #cfe3d2 }
.note--error { background: #2a1c19; border-color: #c0573f; color: #f0cdc2 }
.note--info { background: #1a2423; border-color: #6e8a86; color: #cfdcda }

/* Honeypot: present in the DOM, never seen, never focusable by a human. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }


/* --------------------------------------------------------------------------
   9. PAGER AND SEARCH
   -------------------------------------------------------------------------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 40px; font-size: .88rem }
.pager a { border-bottom: 1px solid #4c5b53 }
.pager a:hover { color: var(--orange) }
.pager-off { color: #58655d }
.pager-at { font-size: .76rem; letter-spacing: .12em; color: #95a69a }

.search-form { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 40px; max-width: 640px }
.search-form input[type=text] { flex: 1 1 240px; min-width: 0 }
.search-group { margin-bottom: 52px }
.search-group h2 { font-family: var(--display); font-size: 1.7rem; margin: 0 0 6px }
.search-count { font-size: .76rem; letter-spacing: .12em; color: #95a69a; margin-bottom: 18px }
mark { background: #4a3a1e; color: #ffe2b8; padding: 0 2px }


/* --------------------------------------------------------------------------
   10. ADMIN AND WRITE
   -------------------------------------------------------------------------- */
.admin-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 16px 0 18px; border-bottom: 1px solid var(--line); margin-bottom: 40px; font-size: .9rem }
.admin-nav a { border-bottom: 1px solid transparent; padding-bottom: 2px }
.admin-nav a:hover, .admin-nav a[aria-current=page] { color: var(--orange); border-bottom-color: var(--orange) }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin-bottom: 46px }
.card { border: 1px solid var(--line); background: var(--panel); padding: 24px 26px }
.card .num { font-family: var(--display); font-size: 3.2rem; line-height: 1; display: block; margin-bottom: 8px }
.card .num-hot { color: var(--orange) }
.card a { font-size: .86rem; border-bottom: 1px solid #4c5b53 }
.card a:hover { color: var(--orange) }

.table-wrap { overflow-x: auto; margin-bottom: 30px }
table.data { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 640px }
table.data th, table.data td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: top }
table.data th { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: #95a69a; font-weight: 600; white-space: nowrap }
table.data tr:hover td { background: #16211f }
table.data td form { display: inline }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; white-space: nowrap }
.row-dim td { opacity: .55 }

.pill { display: inline-block; padding: 2px 9px; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; border: 1px solid; white-space: nowrap }
.pill-live { color: #8fd09b; border-color: #3f6b48 }
.pill-draft { color: #b9c3b5; border-color: #4a564d }
.pill-pending { color: #ffc08f; border-color: #8a5f36 }
.pill-banned { color: #e59d8c; border-color: #7a3c33 }
.pill-admin { color: var(--orange); border-color: #6b4836 }

.why-hidden { font-size: .74rem; letter-spacing: .06em; color: #c99a86; display: block; margin-top: 5px }

.editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 44px; align-items: start }
.editor-side { border: 1px solid var(--line); background: var(--panel); padding: 24px 24px 8px; position: sticky; top: 22px }
.editor-side h2 { font-family: var(--font); font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: #c3cdbc; margin: 0 0 18px }
.editor-side .button-row { margin-top: 20px; flex-direction: column; align-items: stretch }
@media (max-width: 980px) {
  .editor-grid { grid-template-columns: 1fr; gap: 30px }
  .editor-side { position: static }
}

.env-list { list-style: none; margin: 20px 0 34px; padding: 0; border-top: 1px solid var(--line) }
.env-list li { display: grid; grid-template-columns: 26px 1fr; gap: 4px 10px; padding: 13px 2px; border-bottom: 1px solid var(--line) }
.env-mark { font-weight: 700; text-align: center }
.env-ok .env-mark { color: #8fd09b }
.env-bad .env-mark { color: #e5765c }
.env-warn .env-mark { color: #e5b65c }
.env-label { font-weight: 500 }
.env-detail { grid-column: 2; font-size: .84rem; color: #95a69a; word-break: break-word }

.footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .8rem }
.footer-links a { color: #a1b09e }
.footer-links a:hover { color: var(--orange) }


/* --------------------------------------------------------------------------
   11. TRIX EDITOR
   Loaded only on /admin/ and /write/. Styled to match the dark page rather
   than fighting the library's defaults.
   -------------------------------------------------------------------------- */
trix-toolbar .trix_button_group {
  border: 1px solid var(--line); background: #0e1716; margin-bottom: 8px;
}
trix-toolbar .trix-button {
  background: transparent; border-bottom: 0; color: var(--ink);
  border-right: 1px solid var(--line);
}
trix-toolbar .trix-button:not(:disabled):hover { background: #1d2a26 }
trix-toolbar .trix-button.trix-active { background: var(--orange); color: #16211d }
trix-toolbar .trix-button--icon::before { filter: invert(1) opacity(.85) }
trix-toolbar .trix-dialog { background: #16211f; border: 1px solid var(--line); box-shadow: 0 10px 30px #0009 }
trix-toolbar .trix-dialog__link-fields input[type=url] { background: #0e1716; color: var(--ink); border: 1px solid var(--line) }

trix-editor {
  min-height: 420px; padding: 20px 22px;
  background: #0e1716; color: var(--ink);
  border: 1px solid var(--line); border-radius: 0;
  font-size: 1.04rem; line-height: 1.65;
}
trix-editor:empty:not(:focus)::before { color: #6d7a72 }
trix-editor:focus { outline: 2px solid var(--orange); outline-offset: 2px }
trix-editor h1 { font-family: var(--display); font-size: 2rem; font-weight: 600; margin: 1.6rem 0 .7rem }
trix-editor blockquote { border-left: 2px solid var(--orange); padding-left: 18px; color: #c6d0c6; font-style: italic; margin: 1.4rem 0 }
trix-editor a { color: var(--orange); text-decoration: underline }
trix-editor img { max-width: 100%; height: auto }

/* Fallback shown when /vendor/trix.js has not been uploaded yet, so the
   editor degrades to a usable textarea instead of a dead page. */
.editor-fallback { display: block }
.editor-fallback textarea { min-height: 420px; font-size: 1rem; line-height: 1.6 }