/* ==========================================================================
   Sirius Simon — reading theme
   Black, white, one grey. Nothing else, ever.

   The archive at siriussimon.com is dark because it is a gallery and dark
   serves photographs. This is a reading site, and sustained long-form on black
   is harder on the eyes — so the default is light, and prefers-color-scheme
   returns it to the archive's black for anyone who has asked their system for
   dark. Same face, same discipline, appropriate to the job.
   ========================================================================== */

:root {
  --paper:  #ffffff;
  --ink:    #111111;
  --grey:   #767676;   /* the one grey. WCAG AA on paper. */
  --rule:   #e3e3e3;
  --measure: 34rem;    /* ~68 characters. Beyond this, reading degrades. */
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #000000;
    --ink:   #eeeeee;
    --grey:  #9a9a9a;
    --rule:  #2a2a2a;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  line-height: 1.65;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

img, video, iframe { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--paper); color: var(--ink);
  padding: 10px 14px; z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 22px; }
.wide { max-width: 62rem; margin: 0 auto; padding: 0 22px; }

/* --- masthead ------------------------------------------------------------ */

.site-head {
  padding: 40px 0 30px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 48px;
}
.site-head-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
/* The mark, when a logo is set. Falls back to the letterspaced wordmark in
   default.hbs if @site.logo is ever cleared, so the masthead is never empty. */
.site-logo { display: block; height: 34px; width: auto; }
.site-title {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
.site-title a { text-decoration: none; }
.site-nav {
  display: flex; gap: 20px; align-items: baseline; flex-wrap: wrap;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 13.5px;
}
/* Ghost's {{navigation}} emits a <ul><li>. Without this the list keeps its
   bullets and stacks vertically while the hardcoded archive link sits beside
   it — the header misalignment seen on 10 Sept once a second nav item existed. */
.site-nav ul { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; }
.site-nav li { margin: 0; }
.site-nav a { text-decoration: none; color: var(--grey); }
.site-nav a:hover { color: var(--ink); text-decoration: underline; }

/* --- post list ----------------------------------------------------------- */

.list { list-style: none; margin: 0; padding: 0; }
.list-item { padding: 0 0 40px; margin: 0 0 40px; border-bottom: 1px solid var(--rule); }
.list-item:last-child { border-bottom: 0; }
.list-title { font-size: 26px; line-height: 1.25; margin: 0 0 8px; font-weight: 400; }
.list-title a { text-decoration: none; }
.list-title a:hover { text-decoration: underline; }
.list-excerpt { margin: 0 0 10px; color: var(--ink); }
.meta {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 12.5px; color: var(--grey); letter-spacing: 0.02em;
}

/* No author avatars, no reading-time estimates, no share buttons, no related
   posts. Their absence is the design, not an omission. */

/* --- single post --------------------------------------------------------- */

.post-head { margin: 0 0 36px; }
.post-title { font-size: 34px; line-height: 1.2; margin: 0 0 12px; font-weight: 400; }
.post-excerpt { color: var(--grey); font-size: 20px; margin: 0 0 12px; }

.feature { margin: 0 0 40px; }
.feature img { width: 100%; }
.feature figcaption { font-size: 13px; color: var(--grey); margin-top: 8px; }

.content > * + * { margin-top: 1.35em; }
.content h2 { font-size: 24px; line-height: 1.3; font-weight: 400; margin-top: 2em; }
.content h3 { font-size: 20px; line-height: 1.35; font-weight: 400; margin-top: 1.8em; }
.content blockquote {
  margin: 1.8em 0; padding: 0 0 0 20px;
  border-left: 2px solid var(--ink); color: var(--ink); font-style: italic;
}
.content hr { border: 0; border-top: 1px solid var(--rule); margin: 2.6em 0; }
.content code, .content pre {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85em;
}
.content pre { overflow-x: auto; padding: 14px; border: 1px solid var(--rule); }
.content figure { margin: 2em 0; }
.content figcaption { font-size: 13px; color: var(--grey); margin-top: 8px; text-align: left; }

/* Images run full width and uncropped. No decorative frames, no rounded
   corners, no shadows — the picture is the thing. */
.kg-width-wide  { max-width: 52rem; margin-left: 50%; transform: translateX(-50%); }
.kg-width-full  { max-width: 100vw;  margin-left: 50%; transform: translateX(-50%); }
.kg-image { width: 100%; }

/* --- subscribe ----------------------------------------------------------- */
/* Deliberately flat. No exclamation marks, no "join thousands", no counter,
   no incentive. Anything warmer reads as marketing and breaks the register the
   whole archive is built on. */

.subscribe { border-top: 1px solid var(--rule); margin-top: 56px; padding-top: 36px; }
.subscribe-label {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 700; margin: 0 0 8px;
}
.subscribe p { margin: 0 0 16px; color: var(--grey); font-size: 16px; }
.subscribe form { display: flex; gap: 8px; flex-wrap: wrap; }
.subscribe input[type="email"] {
  flex: 1 1 240px; padding: 12px 14px; font: inherit; font-size: 16px;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--grey); border-radius: 0;
}
.subscribe button {
  padding: 12px 22px; font: inherit; font-size: 16px; cursor: pointer;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); border-radius: 0;
}
.subscribe button:hover { background: var(--paper); color: var(--ink); }
.subscribe .small { font-size: 13px; margin: 12px 0 0; }
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.msg { font-size: 14px; margin-top: 12px; }
.msg[hidden] { display: none; }

/* --- comments ------------------------------------------------------------ */

.comments { border-top: 1px solid var(--rule); margin-top: 56px; padding-top: 36px; }

/* --- pagination ---------------------------------------------------------- */

.pagination {
  display: flex; justify-content: space-between; gap: 20px;
  border-top: 1px solid var(--rule); margin-top: 48px; padding-top: 24px;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 13.5px;
}
.pagination a { text-decoration: none; color: var(--grey); }
.pagination a:hover { color: var(--ink); text-decoration: underline; }

/* --- footer -------------------------------------------------------------- */

.site-foot {
  border-top: 1px solid var(--rule);
  margin-top: 80px; padding: 30px 0 70px;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 12.5px; color: var(--grey);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.site-foot a { color: var(--grey); }
.site-foot a:hover { color: var(--ink); }

/* --- small screens ------------------------------------------------------- */

@media (max-width: 640px) {
  body { font-size: 18px; }
  .post-title { font-size: 27px; }
  .list-title { font-size: 22px; }
  .site-head { padding: 28px 0 22px; margin-bottom: 34px; }
  .site-logo { height: 28px; }
  .kg-width-wide, .kg-width-full { margin-left: 0; transform: none; max-width: 100%; }
}

/* Some people have asked their operating system for less movement. Honour it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  .site-nav, .subscribe, .comments, .pagination, .site-foot { display: none; }
  body { background: #fff; color: #000; font-size: 12pt; }
}

/* --- Ghost editor cards --------------------------------------------------
   Styled here rather than letting Ghost inject its own, because Ghost's
   defaults carry rounded corners, shadows and an accent colour, and this
   estate has none of those. Monochrome, square, one rule. */

.kg-bookmark-card, .kg-bookmark-container {
  display: flex; text-decoration: none; color: var(--ink);
  border: 1px solid var(--rule); margin: 2em 0; min-height: 0;
}
.kg-bookmark-container:hover { border-color: var(--ink); text-decoration: none; }
.kg-bookmark-content {
  display: flex; flex-direction: column; flex-grow: 1;
  padding: 18px 20px; order: 1;
}
.kg-bookmark-title { font-size: 17px; line-height: 1.35; font-weight: 700; }
.kg-bookmark-description {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-top: 6px; color: var(--grey); font-size: 15px;
}
.kg-bookmark-metadata {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: 14px; font-size: 13px; color: var(--grey);
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
.kg-bookmark-icon { width: 18px; height: 18px; margin-right: 4px; }
.kg-bookmark-author, .kg-bookmark-publisher { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kg-bookmark-publisher::before { content: "·"; margin: 0 6px; }
.kg-bookmark-thumbnail { position: relative; order: 2; min-width: 33%; }
.kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 640px) {
  .kg-bookmark-card, .kg-bookmark-container { flex-direction: column; }
  .kg-bookmark-thumbnail { order: 0; min-height: 160px; }
}

/* Gallery cards: full width, uncropped, no frames — same rule as the archive. */
.kg-gallery-container { display: flex; flex-direction: column; }
.kg-gallery-row { display: flex; flex-direction: row; justify-content: center; }
.kg-gallery-image img { display: block; margin: 0; width: 100%; height: 100%; }
.kg-gallery-row:not(:first-of-type) { margin: 6px 0 0; }
.kg-gallery-image:not(:first-of-type) { margin: 0 0 0 6px; }

/* Callout / toggle, kept quiet. */
.kg-callout-card { display: flex; gap: 12px; padding: 16px 18px; border: 1px solid var(--rule); margin: 2em 0; }
.kg-callout-card-accent { border-left: 2px solid var(--ink); }
.kg-toggle-card { border: 1px solid var(--rule); padding: 16px 18px; margin: 2em 0; }
.kg-toggle-heading { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }