/* ==========================================================================
   Overscore — screen.css
   Ghost 6.x theme for richardlyon.net. No build step; plain CSS.
   Class contract lives in DESIGN.md — keep the two in lockstep.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted, licensed Butterick woff2)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Equity";
  src: url("../fonts/equity-b-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Equity";
  src: url("../fonts/equity-b-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Equity";
  src: url("../fonts/equity-b-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Equity";
  src: url("../fonts/equity-b-bold-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Equity Caps";
  src: url("../fonts/equity-b-caps-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Concourse";
  src: url("../fonts/concourse-t3-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Concourse";
  src: url("../fonts/concourse-t3-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Concourse";
  src: url("../fonts/concourse-t6-regular.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Concourse";
  src: url("../fonts/concourse-t3-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Concourse Caps";
  src: url("../fonts/concourse-c3-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Concourse Caps";
  src: url("../fonts/concourse-c3-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */

:root {
  --bg:        #EAE9DF;
  --bg-alt:    #E2E1D4;
  --ink:       #2C1810;
  --ink-soft:  #6D4C3D;
  --muted:     #8A7A6E;
  --rule:      #8D6E63;
  --accent:    #8D6E63;

  --font-body:      "Equity", Georgia, serif;
  --font-caps:      "Equity Caps", Georgia, serif;
  --font-sans:      "Concourse", -apple-system, sans-serif;
  --font-sans-caps: "Concourse Caps", -apple-system, sans-serif;
  --font-mono:      ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --sidebar-w: 200px;
  --col-gap:   48px;
  --content-w: 660px;
  --page-w:    calc(var(--sidebar-w) + var(--col-gap) + var(--content-w)); /* 908px */
  --page-pad:  24px;

  --text-base: 21px;
  --lh-base:   1.5;
}

/* --------------------------------------------------------------------------
   3. Reset-lite & base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  /* --gh-font-body is injected by Ghost when a custom font is chosen in admin. */
  font-family: var(--gh-font-body, var(--font-body));
  font-size: var(--text-base);
  line-height: var(--lh-base);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote {
  margin: 0;
}

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

a {
  color: inherit;
}

::selection {
  background: rgba(141, 110, 99, 0.28);
}

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

/* Centred page column. */
main {
  display: block; /* old-Safari safety */
  max-width: calc(var(--page-w) + 2 * var(--page-pad));
  margin: 0 auto;
  padding: 48px var(--page-pad) 0;
}

/* --------------------------------------------------------------------------
   4. Site header
   -------------------------------------------------------------------------- */

.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  /* The max() keeps the bar's content aligned with the page column while the
     border-bottom runs the full viewport width. */
  padding: 18px max(var(--page-pad), calc((100% - var(--page-w)) / 2)) 16px;
  border-bottom: 1px solid rgba(44, 24, 16, 0.08);
}

.site-title {
  margin: 0;
  font-family: var(--font-sans-caps);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  line-height: 1.2;
}

a.site-title,
.site-title a {
  text-decoration: none;
  color: var(--ink);
}

.site-nav {
  display: flex;
  align-items: baseline;
  gap: 26px;
  flex-wrap: wrap;
}

/* Ghost's {{navigation}} helper emits <ul class="nav"><li>…; flatten it. */
.site-nav .nav {
  display: flex;
  align-items: baseline;
  gap: 26px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  font-family: var(--font-sans-caps);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--ink);
}

.site-nav a:hover {
  color: var(--rule);
}

.site-nav a.nav-current,
.site-nav .nav-current a {
  color: var(--rule);
}

/* --------------------------------------------------------------------------
   5. Index layout: sidebar + post list
   -------------------------------------------------------------------------- */

.page-grid {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, var(--content-w));
  gap: var(--col-gap);
  align-items: start;
}

.sidebar {
  text-align: right;
}

/* The signature 3px overscore rule, full width of its column. */
.overscore {
  border-top: 3px solid var(--rule);
  padding-top: 18px;
}

.sidebar-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
}

.sidebar-subtitle {
  margin-top: 20px;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.25;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   6. Post list
   -------------------------------------------------------------------------- */

.post-list {
  display: flex;
  flex-direction: column;
}

.post-item {
  display: grid;
  grid-template-columns: 96px 1fr;
  column-gap: 24px;
  row-gap: 8px;
  padding: 24px;
  border-radius: 4px;
}

.post-item:nth-child(even) {
  background: var(--bg-alt);
}

.post-item-thumb {
  grid-column: 1;
  grid-row: 1 / span 3;
  display: block;
  width: 96px;
  height: 96px;
}

.post-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
}

/* Everything except the thumbnail lives in the text column. Works whether the
   partial nests text in a wrapper or lays header/excerpt/tags flat. */
.post-item > :not(.post-item-thumb) {
  grid-column: 2;
  min-width: 0;
}

/* No feature image: let the text span the full row. */
.post-item:not(:has(.post-item-thumb)) {
  grid-template-columns: 1fr;
}

.post-item:not(:has(.post-item-thumb)) > * {
  grid-column: 1;
}

.post-item-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}

.post-item-title {
  margin: 0;
  font-family: var(--font-sans-caps);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  line-height: 1.35;
}

.post-item-title a {
  color: var(--ink);
  text-decoration: none;
}

.post-item-title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}

.post-item-date {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  color: var(--muted);
}

.post-item-excerpt {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
}

.post-item-tags a {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
}

.post-item-tags a:hover {
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   7. Pagination (Ghost {{pagination}})
   -------------------------------------------------------------------------- */

.pagination {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding: 20px 24px 0;
  border-top: 1px solid rgba(44, 24, 16, 0.12);
  font-family: var(--font-sans-caps);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: lowercase;
}

/* On index pages the pagination is the last child of .post-list, so it sits
   inside the grid's content column; nothing extra needed. */

.pagination a {
  color: var(--ink);
  text-decoration: none;
}

.pagination a:hover {
  color: var(--rule);
}

.pagination .page-number {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--muted);
}

/* Keep older/older at the edges even when one link is absent. */
.pagination .newer-posts {
  margin-right: auto;
}

.pagination .older-posts {
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   8. Post & page layout — the Tufte column
   -------------------------------------------------------------------------- */

/* The article occupies the content column; the left margin stays empty for
   the aside block and floated margin notes. */
.post-template main > article,
.page-template main > article {
  /* flow-root contains the floated aside/margin notes so they can't hang
     below the article into the footer; they still paint left of the box. */
  display: flow-root;
  margin-left: calc(var(--sidebar-w) + var(--col-gap));
  max-width: var(--content-w);
}

/* Sidebar header block, pulled left into the empty margin. */
.post-aside {
  float: left;
  clear: left;
  width: var(--sidebar-w);
  margin-left: calc(-1 * (var(--sidebar-w) + var(--col-gap)));
  text-align: right;
}

.post-aside-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
}

.post-aside-subtitle {
  margin-top: 18px;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
}

.post-aside-date {
  display: block;
  margin-top: 18px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  color: var(--muted);
}

.post-aside-tags {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px 12px;
}

.post-aside-tags a {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: none;
}

.post-aside-tags a:hover {
  color: var(--rule);
}

/* Feature image at the top of the post column. */
.post-feature-image {
  margin: 0 0 36px;
}

.post-feature-image img {
  width: 100%;
  border-radius: 4px;
}

.post-feature-image figcaption {
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   9. Post body typography (.post-content wraps Ghost's .gh-content)
   -------------------------------------------------------------------------- */

.post-content {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--ink);
  max-width: var(--content-w);
}

.post-content > * + *,
.post-content .gh-content > * + * {
  margin-top: 1.1em;
}

.post-content h2,
.post-content h3,
.post-content h4 {
  /* --gh-font-heading is injected by Ghost when a custom font is chosen in admin. */
  font-family: var(--gh-font-heading, var(--font-body));
  font-weight: 700;
  line-height: 1.25;
  margin-top: 1.6em;
}

.post-content h2 { font-size: 26px; }
.post-content h3 { font-size: 22px; }
.post-content h4 { font-size: 21px; }

.post-content a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}

.post-content a:hover {
  color: var(--rule);
}

.post-content strong {
  font-weight: 700;
}

.post-content ul,
.post-content ol {
  padding-left: 1.4em;
  margin-bottom: 0;
}

.post-content li {
  margin-top: 0.35em;
}

.post-content li:first-child {
  margin-top: 0;
}

.post-content blockquote {
  font-style: italic;
  border-left: 3px solid var(--rule);
  padding-left: 20px;
  color: var(--ink);
}

.post-content blockquote cite {
  display: block;
  margin-top: 0.5em;
  font-style: normal;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--muted);
}

.post-content code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: rgba(44, 24, 16, 0.05);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

.post-content pre {
  margin: 0;
  padding: 20px;
  background: rgba(44, 24, 16, 0.05);
  border-radius: 4px;
  overflow-x: auto;
  line-height: 1.45;
}

.post-content pre code {
  background: none;
  padding: 0;
  font-size: 15px;
}

.post-content hr {
  border: none;
  border-top: 1px solid rgba(44, 24, 16, 0.15);
  margin: 2.2em auto;
}

.post-content figure {
  margin-left: 0;
  margin-right: 0;
}

.post-content figcaption {
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

.post-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 18px;
}

.post-content th,
.post-content td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(44, 24, 16, 0.12);
}

.post-content th {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   10. Ghost cards (kg-*)
   -------------------------------------------------------------------------- */

/* Wide/full breakouts deliberately stay at content width in this theme. */
.post-content .kg-width-wide,
.post-content .kg-width-full {
  max-width: 100%;
}

.post-content .kg-image-card img,
.post-content .kg-image {
  margin: 0 auto;
  border-radius: 4px;
}

/* Gallery */
.post-content .kg-gallery-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.post-content .kg-gallery-row {
  display: flex;
  gap: 4px;
}

.post-content .kg-gallery-image {
  flex: 1 1 0;
  min-width: 0;
}

.post-content .kg-gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}

/* Bookmark */
.post-content .kg-bookmark-card a {
  text-decoration: none;
  color: inherit;
}

.post-content .kg-bookmark-container {
  display: flex;
  border: 1px solid rgba(44, 24, 16, 0.15);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(44, 24, 16, 0.02);
}

.post-content .kg-bookmark-container:hover {
  border-color: var(--rule);
}

.post-content .kg-bookmark-content {
  flex-grow: 1;
  padding: 16px 20px;
  min-width: 0;
}

.post-content .kg-bookmark-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
}

.post-content .kg-bookmark-description {
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-content .kg-bookmark-metadata {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}

.post-content .kg-bookmark-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.post-content .kg-bookmark-thumbnail {
  flex-shrink: 0;
  width: 200px;
  position: relative;
}

.post-content .kg-bookmark-thumbnail img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Embeds (YouTube etc.) */
.post-content .kg-embed-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.post-content .kg-embed-card iframe,
.post-content .kg-embed-card object,
.post-content .kg-embed-card embed {
  max-width: 100%;
  border: 0;
}

/* Buttons and other cards keep sensible defaults; nothing bespoke needed. */

/* --------------------------------------------------------------------------
   11. Margin callouts — the Miessler left-column notes
   -------------------------------------------------------------------------- */

.post-content .kg-callout-card {
  /* Ghost's injected cards CSS makes callouts display:flex; reset it so the
     note fills the margin box and text-align: right actually applies. */
  display: block;
  float: left;
  clear: left;
  width: var(--sidebar-w);
  margin-left: calc(-1 * (var(--sidebar-w) + var(--col-gap)));
  margin-top: 0.3em; /* optically align with the adjacent line of body text */
  background: none;
  padding: 0;
  text-align: right;
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--ink-soft);
}

.post-content .kg-callout-card .kg-callout-emoji {
  display: none;
}

.post-content .kg-callout-card .kg-callout-text {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: 96px;
  padding: 24px max(var(--page-pad), calc((100% - var(--page-w)) / 2)) 40px;
  border-top: 1px solid rgba(44, 24, 16, 0.08);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

.site-footer a {
  color: var(--muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   13. Error page
   -------------------------------------------------------------------------- */

.error-page {
  text-align: center;
  padding: 120px 24px;
}

.error-page h1 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 28px;
}

.error-page p {
  margin-top: 16px;
  font-style: italic;
  color: var(--ink-soft);
}

.error-page .overscore {
  display: inline-block;
  max-width: 460px;
}

.error-page .error-link {
  display: inline-block;
  margin-top: 24px;
  font-family: var(--font-sans-caps);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--ink);
}

.error-page .error-link:hover {
  color: var(--rule);
}

/* --------------------------------------------------------------------------
   14. Mobile collapse (<900px)
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

  main {
    padding-top: 32px;
  }

  .site-header {
    padding-top: 14px;
    padding-bottom: 12px;
    gap: 10px 20px;
  }

  /* Index: single column; sidebar becomes a normal left-aligned header. */
  .page-grid {
    display: block;
  }

  .sidebar {
    text-align: left;
    margin-bottom: 36px;
    max-width: var(--content-w);
  }

  .overscore {
    padding-top: 14px;
  }

  .post-item {
    padding: 18px 16px;
    column-gap: 16px;
    grid-template-columns: 72px 1fr;
  }

  .post-item-thumb {
    width: 72px;
    height: 72px;
  }

  .post-item-header {
    flex-wrap: wrap;
    gap: 2px 16px;
  }

  /* Post/page: collapse the Tufte column. */
  .post-template main > article,
  .page-template main > article {
    margin-left: 0;
    max-width: var(--content-w);
  }

  .post-aside {
    float: none;
    width: auto;
    margin-left: 0;
    margin-bottom: 36px;
    text-align: left;
  }

  .post-aside-tags {
    justify-content: flex-start;
  }

  /* Margin callouts become inline indented notes. */
  .post-content .kg-callout-card {
    float: none;
    width: auto;
    margin-left: 0;
    margin-top: 1.1em;
    border-left: 3px solid var(--rule);
    padding-left: 16px;
    text-align: left;
  }

  .post-content .kg-bookmark-thumbnail {
    display: none;
  }

  .pagination {
    padding-left: 16px;
    padding-right: 16px;
  }
}