/* ==========================================================================
   screen.css — adikumar.co Ghost theme
   Main stylesheet. Imports tokens.css for all design values.
   NO raw hex codes, font names, or magic numbers in this file.

   Sections:
     1. Imports & font-face
     2. Reset & base
     3. Layout scaffolding
     4. Skip link & accessibility
     5. Navigation
     6. PROSE TYPOGRAPHY (highest investment — the reading experience)
     7. Disclosure block
     8. Ghost editor cards (kg-*)
     9. Post cards
    10. Pagination
    11. Footer
    12. Utility classes
    13. Print styles
    14. Animations & motion
   ========================================================================== */


/* ==========================================================================
   1. Imports & @font-face
   ========================================================================== */

@import url('tokens.css');

/* Source Serif Pro — body text, headings (serif)
   Latin + Latin-ext subsets for Western European coverage.
   See theme/assets/fonts/LICENSES.md for SIL OFL 1.1 terms. */

@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-serif-pro-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-serif-pro-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-serif-pro-400i-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-serif-pro-400i-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* Source Serif Pro 600 (semibold) — for <strong> emphasis in body text.
   SSP doesn't ship a 500 weight; 600 is the lightest step above normal.
   Not preloaded — only fetched when the browser encounters weight 600. */

@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/source-serif-pro-600-latin.woff2') format('woff2');
}

/* Inter — UI labels, captions, nav (sans-serif)
   Variable font covering weights 400–500. Not preloaded — loads via swap. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/inter-400-500.woff2') format('woff2');
}


/* ==========================================================================
   2. Reset & base
   ========================================================================== */

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

html {
  font-size: 100%; /* 16px base — rem values computed from this */
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  /* Ghost custom fonts: --gh-font-body is set via {{ghost_head}} when the user
     selects a custom font in Admin → Design. Falls back to our serif stack. */
  font-family: var(--gh-font-body, var(--font-serif));
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

::selection {
  background-color: var(--color-selection-bg);
}

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

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}

a:hover {
  color: var(--color-link-hover);
}

/* Remove default focus outline; replaced by :focus-visible below */
:focus {
  outline: none;
}

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

/* Headings: serif, normal weight, no bold (per visual identity).
   --gh-font-heading: Ghost custom font override from Admin → Design. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--gh-font-heading, var(--font-serif));
  font-weight: var(--weight-normal);
  line-height: var(--leading-tight);
  color: var(--color-text);
}


/* ==========================================================================
   3. Layout scaffolding
   ========================================================================== */

.site-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-content {
  flex: 1;
}

/* Content column: centered, max-width for reading comfort */
.content-column {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
}

/* Wide breakout: charts, wide images */
.content-wide {
  max-width: var(--wide-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
}

/* Full-width breakout: edge-to-edge on large screens */
.content-full {
  max-width: var(--full-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
}

/* Section spacing */
.section {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.section + .section {
  padding-top: 0;
}


/* ==========================================================================
   4. Skip link & accessibility
   ========================================================================== */

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 1000;
  padding: var(--space-2) var(--space-4);
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-md);
  transform: translateY(-200%);
  transition: transform var(--duration-fast) var(--ease-default);
}

.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  color: var(--color-bg);
}

/* Visually hidden but accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   5. Navigation
   ========================================================================== */

.site-header {
  padding: var(--space-6) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}

.site-header-inner {
  max-width: var(--full-width);
  margin: 0 auto;
  padding: 0 var(--site-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.site-logo {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-normal);
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  white-space: nowrap;
}

.site-logo:hover {
  color: var(--color-text);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.site-nav a {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  letter-spacing: var(--tracking-wide);
  transition: color var(--duration-fast) var(--ease-default);
}

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

/* Dark mode toggle button */
.darkmode-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-default),
              background-color var(--duration-fast) var(--ease-default);
}

.darkmode-toggle:hover {
  color: var(--color-text);
  background-color: var(--color-border);
}

.darkmode-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Sun/moon icon visibility: show moon in light mode, sun in dark mode */
.icon-sun { display: none; }
.icon-moon { display: block; }

[data-theme="dark"] .icon-sun { display: block; }
[data-theme="dark"] .icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: block; }
  :root:not([data-theme="light"]) .icon-moon { display: none; }
}

/* Mobile nav */
@media (max-width: 767px) {
  .site-header-inner {
    flex-wrap: wrap;
  }

  .site-nav {
    width: 100%;
    justify-content: flex-start;
    gap: var(--space-4);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }
}


/* ==========================================================================
   6. PROSE TYPOGRAPHY
   The reading experience. This is the core of the publication.
   Aesthetic targets: Stratechery, FT, Aeon.
   Applied to .post-content (Ghost's content output) and .page-content.

   Key design decisions:
   - <strong> renders at weight 600 (SSP semibold), not 400 or 700. The "no bold
     serif" rule guards against heavy slab headings, not against losing emphasis
     in body text. 600 gives visible stress without the aggressive look of 700.
   - Lead paragraph auto-sizes on .post-content only (essays). Static pages
     (.page-content) skip it — About, Start Here, Archive don't need the bump.
   - Hanging punctuation on blockquotes (Safari-only, degrades gracefully).
   - Smart-quote font features enabled where the font supports them.
   ========================================================================== */

.post-content,
.page-content {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  /* Enable OpenType features for smart quote rendering and kerning */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-kerning: normal;
}

/* --- Paragraph rhythm ---------------------------------------------------- */

.post-content p,
.page-content p {
  margin-bottom: var(--space-6);
}

/* Tighten spacing between consecutive paragraphs for flow */
.post-content p + p,
.page-content p + p {
  margin-top: 0;
}

/* Lead paragraph: slightly larger, for the opening of essays.
   Scoped to .post-content only — static pages (.page-content) don't get the
   bump because About, Start Here, Archive don't have essay-style openings. */
.post-content > p:first-of-type {
  font-size: var(--text-md);
  line-height: var(--leading-snug);
}

/* --- Heading hierarchy --------------------------------------------------- */
/* Each level is visually distinct. Generous top margin creates breathing room
   between sections; tighter bottom margin keeps heading tied to its content. */

.post-content h2,
.page-content h2 {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-top: var(--space-16);
  margin-bottom: var(--space-6);
}

.post-content h3,
.page-content h3 {
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
}

.post-content h4,
.page-content h4 {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  color: var(--color-text-secondary);
}

/* Prevent double spacing when heading follows heading */
.post-content h2 + h3,
.page-content h2 + h3 {
  margin-top: var(--space-6);
}

.post-content h3 + h4,
.page-content h3 + h4 {
  margin-top: var(--space-4);
}

/* --- Links in prose ------------------------------------------------------ */

.post-content a,
.page-content a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--duration-fast) var(--ease-default),
              text-decoration-color var(--duration-fast) var(--ease-default);
}

.post-content a:hover,
.page-content a:hover {
  color: var(--color-link-hover);
  text-decoration-color: var(--color-link-hover);
}

/* --- Emphasis ------------------------------------------------------------ */
/* "No bold serif" guards against heavy 700-weight slab headings, not against
   losing emphasis in body text. <strong> at weight 500 gives visible stress
   without the aggressive look — the FT and NYT use a similar approach. */

.post-content strong,
.page-content strong {
  font-weight: var(--weight-emphasis);
}

.post-content em,
.page-content em {
  font-style: italic;
}

/* --- Blockquotes --------------------------------------------------------- */
/* Standard blockquote: left border + indent, for citations and references. */

.post-content blockquote,
.page-content blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-1) 0 var(--space-1) var(--space-8);
  border-left: 3px solid var(--color-accent);
  /* Hang opening quote outside the text column — editorial-grade detail.
     Safari-only as of 2026; degrades gracefully (quote stays inline elsewhere). */
  hanging-punctuation: first;
}

.post-content blockquote p,
.page-content blockquote p {
  font-style: italic;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.post-content blockquote p:last-child,
.page-content blockquote p:last-child {
  margin-bottom: 0;
}

/* Pull quote: larger, centered, for the key argument of a section.
   Use Ghost's "large" blockquote style or wrap in .pullquote class. */

.post-content blockquote.pullquote,
.post-content .kg-blockquote-alt {
  border-left: none;
  padding: var(--space-8) 0;
  margin: var(--space-12) calc(var(--space-8) * -1);
  text-align: center;
}

.post-content blockquote.pullquote p,
.post-content .kg-blockquote-alt p {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--color-accent);
  hanging-punctuation: first last;
}

@media (min-width: 768px) {
  .post-content blockquote.pullquote,
  .post-content .kg-blockquote-alt {
    margin-left: calc(var(--space-16) * -1);
    margin-right: calc(var(--space-16) * -1);
  }
}

/* --- Lists --------------------------------------------------------------- */

.post-content ul,
.post-content ol,
.page-content ul,
.page-content ol {
  margin: var(--space-6) 0;
  padding-left: var(--space-8);
}

.post-content li,
.page-content li {
  margin-bottom: var(--space-2);
  padding-left: var(--space-2);
}

.post-content li::marker {
  color: var(--color-gray-mid);
}

/* Nested lists */
.post-content li > ul,
.post-content li > ol,
.page-content li > ul,
.page-content li > ol {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

/* --- Horizontal rule ----------------------------------------------------- */

.post-content hr,
.page-content hr {
  border: none;
  border-top: var(--border-width) solid var(--color-rule);
  margin: var(--space-12) auto;
  max-width: 5rem;
}

/* --- Code ---------------------------------------------------------------- */

/* Inline code */
.post-content code,
.page-content code {
  font-family: var(--font-mono);
  font-size: 0.875em; /* relative to parent */
  background: var(--color-code-bg);
  color: var(--color-code-text);
  padding: 0.125em 0.375em;
  border-radius: var(--radius-sm);
}

/* Code blocks */
.post-content pre,
.page-content pre {
  background: var(--color-code-bg);
  color: var(--color-code-text);
  padding: var(--space-6);
  margin: var(--space-8) 0;
  border-radius: var(--radius-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.post-content pre code,
.page-content pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

/* --- Tables -------------------------------------------------------------- */

.post-content table,
.page-content table {
  width: 100%;
  margin: var(--space-8) 0;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-family: var(--font-sans);
}

.post-content th,
.page-content th {
  text-align: left;
  font-weight: var(--weight-medium);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-border);
  color: var(--color-text);
}

.post-content td,
.page-content td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
  color: var(--color-text-secondary);
}

/* --- Images & figures ---------------------------------------------------- */
/* Ghost wraps images in <figure> with .kg-image-card */

.post-content figure,
.page-content figure {
  margin: var(--space-10) 0;
}

.post-content figcaption,
.page-content figcaption {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-3);
  text-align: center;
  line-height: var(--leading-relaxed);
}

/* --- Asymmetric breakout layouts ----------------------------------------- */
/* Ghost editor width classes for images and embeds.
   These break out of the content column on wider screens. */

.post-content .kg-width-wide {
  max-width: var(--wide-width);
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 0 var(--site-padding);
}

.post-content .kg-width-full {
  max-width: none;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* On small screens, breakout collapses to content width */
@media (max-width: 767px) {
  .post-content .kg-width-wide {
    max-width: none;
    margin-left: calc(var(--site-padding) * -1);
    margin-right: calc(var(--site-padding) * -1);
    transform: none;
    padding: 0;
  }

  .post-content .kg-width-full {
    margin-left: calc(var(--site-padding) * -1);
    margin-right: calc(var(--site-padding) * -1);
  }
}

/* --- Side notes (margin notes on wide screens) --------------------------- */
/* Convention: use a <div class="sidenote"> in Ghost HTML cards */

.post-content .sidenote {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: var(--space-6) 0;
  padding: var(--space-4);
  border-left: 2px solid var(--color-border);
}

@media (min-width: 1280px) {
  .post-content .sidenote {
    position: relative;
    float: right;
    clear: right;
    width: var(--sidenote-width);
    margin-right: var(--sidenote-offset);
    margin-top: 0;
    margin-bottom: var(--space-4);
    padding: 0;
    border-left: none;
  }
}

/* --- Footnotes ----------------------------------------------------------- */

.post-content sup {
  font-size: var(--text-xs);
  line-height: 0;
  vertical-align: super;
}

.post-content sup a {
  text-decoration: none;
  color: var(--color-accent);
}

.post-content .footnotes {
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.post-content .footnotes li {
  margin-bottom: var(--space-4);
}


/* ==========================================================================
   7. Disclosure block
   Compliance-adjacent text, styled distinctly but not buried.
   Triggered by #disclosure internal tag on posts.
   ========================================================================== */

.disclosure {
  margin: var(--space-8) 0;
  padding: var(--space-5) 0;
  border-top: var(--border-width) solid var(--color-border);
  border-bottom: var(--border-width) solid var(--color-border);
}

.disclosure p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin: 0;
}


/* ==========================================================================
   8. Ghost editor cards (kg-*)
   Styles for Ghost's built-in content cards. Ghost injects cards.min.css
   via {{ghost_head}} — these rules supplement or override as needed.
   ========================================================================== */

/* Image cards */
.kg-image-card img,
.kg-gallery-image img {
  border-radius: 0;
  height: auto;
}

/* Gallery grid */
.kg-gallery-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-10) 0;
}

.kg-gallery-row {
  display: flex;
  gap: var(--space-3);
}

.kg-gallery-image {
  flex: 1;
}

.kg-gallery-image img {
  width: 100%;
  object-fit: cover;
}

/* Bookmark cards */
.kg-bookmark-card {
  margin: var(--space-8) 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.kg-bookmark-container {
  display: flex;
  text-decoration: none;
  color: var(--color-text);
}

.kg-bookmark-content {
  flex: 1;
  padding: var(--space-5);
}

.kg-bookmark-title {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.kg-bookmark-description {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
  line-height: var(--leading-relaxed);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kg-bookmark-metadata {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.kg-bookmark-icon {
  width: 1rem;
  height: 1rem;
}

.kg-bookmark-thumbnail {
  width: 8rem;
  min-height: 100%;
}

.kg-bookmark-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Embed cards (YouTube, Twitter, etc.) */
.kg-embed-card {
  margin: var(--space-8) 0;
}

.kg-embed-card iframe {
  width: 100%;
}

/* Callout cards */
.kg-callout-card {
  margin: var(--space-8) 0;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--space-4);
}

/* Button cards */
.kg-button-card {
  margin: var(--space-8) 0;
  text-align: center;
}

.kg-button-card a {
  display: inline-block;
  padding: var(--space-3) var(--space-8);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-default);
}

.kg-button-card a:hover {
  opacity: 0.85;
}

/* Toggle cards */
.kg-toggle-card {
  margin: var(--space-8) 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
}


/* ==========================================================================
   9. Post cards
   Used on index, tag, author, and home pages.
   ========================================================================== */

.post-card {
  padding: var(--space-8) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}

.post-card:first-child {
  padding-top: 0;
}

.post-card-link {
  display: block;
  text-decoration: none;
  color: var(--color-text);
}

.post-card-link:hover {
  color: var(--color-text);
}

.post-card-tag {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.post-card-title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--weight-normal);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-3);
}

.post-card-link:hover .post-card-title {
  color: var(--color-accent);
}

.post-card-excerpt {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card-meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-gray-mid);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.post-card-meta-separator {
  color: var(--color-border);
}

/* Post card grid layout for home page */
.post-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 768px) {
  .post-card-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-12);
  }

  /* Alternate border pattern in grid */
  .post-card-grid .post-card {
    border-bottom: var(--border-width) solid var(--color-border);
  }
}

@media (min-width: 1024px) {
  .post-card-grid--three {
    grid-template-columns: 1fr 1fr 1fr;
  }
}


/* ==========================================================================
   10. Pagination
   ========================================================================== */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-12) 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

.pagination a {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: var(--weight-medium);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  transition: color var(--duration-fast) var(--ease-default),
              background-color var(--duration-fast) var(--ease-default);
}

.pagination a:hover {
  color: var(--color-text);
  background-color: var(--color-border);
}

.pagination .page-number {
  color: var(--color-gray-mid);
}


/* ==========================================================================
   11. Footer
   ========================================================================== */

/* Footer: three-row editorial structure, all centered.
   Row 1 (tagline) is most prominent, row 3 (legal) is smallest. */

.site-footer {
  padding: var(--space-16) 0 var(--space-12);
  border-top: var(--border-width) solid var(--color-border);
  margin-top: var(--space-16);
}

.site-footer-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--site-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-8);
}

/* Row 1: tagline — most prominent */
.site-footer-tagline {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

/* Row 2: action links */
.site-footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
}

.site-footer-nav a {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}

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

/* Row 3: attribution + copyright — smallest text */
.site-footer-legal {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-gray-mid);
  line-height: var(--leading-relaxed);
}

.site-footer-legal a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}

.site-footer-legal a:hover {
  color: var(--color-text);
}


/* ==========================================================================
   12. Utility classes
   ========================================================================== */

/* Post header (used in post.hbs and page.hbs) */
.post-header {
  padding: var(--space-16) 0 var(--space-8);
}

.post-title {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
  .post-title {
    font-size: var(--text-4xl);
  }
}

.post-meta {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.post-meta-separator {
  color: var(--color-border);
}

.post-tag-link {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
  text-decoration: none;
}

.post-tag-link:hover {
  color: var(--color-link-hover);
}

/* Feature image */
.post-feature-image {
  margin: var(--space-8) 0;
}

.post-feature-image img {
  width: 100%;
  height: auto;
}

/* Author box at end of post */
.post-author-box {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-8) 0;
  border-top: var(--border-width) solid var(--color-border);
  margin-top: var(--space-12);
}

/* On the author archive page, remove the border/margin that's only for post footers */
.post-author-box.author-page-header {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.post-author-avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.post-author-name {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.post-author-bio {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-1);
}

/* Post navigation (prev/next) */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  padding: var(--space-8) 0;
  border-top: var(--border-width) solid var(--color-border);
}

.post-nav-item {
  text-decoration: none;
  color: var(--color-text);
}

.post-nav-item:hover .post-nav-title {
  color: var(--color-accent);
}

.post-nav-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-gray-mid);
  margin-bottom: var(--space-2);
}

.post-nav-title {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  transition: color var(--duration-fast) var(--ease-default);
}

.post-nav-next {
  text-align: right;
}

@media (max-width: 639px) {
  .post-nav {
    grid-template-columns: 1fr;
  }
}

/* Newsletter CTA (inline in post, extracted to partial in Phase 2) */
.newsletter-cta {
  padding: var(--space-10) var(--space-8);
  margin: var(--space-12) 0;
  background: var(--color-code-bg);
  border-radius: var(--radius-lg);
  text-align: center;
}

.newsletter-cta-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}

.newsletter-cta-description {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

.newsletter-cta-form {
  display: flex;
  gap: var(--space-3);
  max-width: 24rem;
  margin: 0 auto;
}

.newsletter-cta-form input[type="email"] {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
}

.newsletter-cta-form input[type="email"]::placeholder {
  color: var(--color-gray-mid);
}

.newsletter-cta-form button {
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  background: var(--color-accent);
  color: var(--color-paper);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--duration-fast) var(--ease-default);
}

.newsletter-cta-form button:hover {
  opacity: 0.85;
}

@media (max-width: 479px) {
  .newsletter-cta-form {
    flex-direction: column;
  }
}

/* Tag page header */
.tag-header {
  padding: var(--space-16) 0 var(--space-8);
  border-bottom: var(--border-width) solid var(--color-border);
  margin-bottom: var(--space-8);
}

.tag-name {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-3);
}

.tag-description {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  max-width: var(--content-width);
}

/* Privacy page: softer heading hierarchy for skimmable legal content */
.page-content--privacy h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
}

.page-content--privacy h3 {
  font-size: var(--text-lg);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

/* Error page */
.error-page {
  text-align: center;
  padding: var(--space-24) var(--site-padding);
}

.error-code {
  font-family: var(--font-sans);
  font-size: var(--text-4xl);
  color: var(--color-border);
  margin-bottom: var(--space-4);
}

.error-message {
  font-size: var(--text-xl);
  margin-bottom: var(--space-8);
}

.error-link {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

/* Home page sections */
.home-section {
  padding: var(--space-12) 0;
}

.home-section + .home-section {
  border-top: var(--border-width) solid var(--color-border);
}

.home-section-title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-gray-mid);
  margin-bottom: var(--space-8);
}

/* Hero post on home page */
.hero-post {
  padding: var(--space-16) 0 var(--space-12);
}

.hero-post-tag {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.hero-post-title {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
  .hero-post-title {
    font-size: var(--text-4xl);
  }
}

.hero-post-excerpt {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  max-width: var(--content-width);
  margin-bottom: var(--space-5);
}

.hero-post-link {
  color: inherit;
  text-decoration: none;
}

.hero-post-link:hover {
  color: var(--color-accent);
}

.hero-post-meta {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-gray-mid);
}

/* Pillar cards (home page) */
.pillar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .pillar-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .pillar-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.pillar-card {
  display: block;
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease-default);
}

.pillar-card:hover {
  border-color: var(--color-accent);
  color: var(--color-text);
}

.pillar-card-name {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
}

.pillar-card-description {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* LinkedIn share + email response */
.post-share {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-6) 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

.post-share a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: var(--weight-medium);
  transition: border-color var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}

.post-share a:hover {
  border-color: var(--color-text);
  color: var(--color-text);
}


/* ==========================================================================
   13. Print styles
   ========================================================================== */

@media print {
  /* Print hardcodes black/gray — tokens may resolve to dark-mode values which
     would be invisible on white paper. These are the only raw colors in the file. */
  body {
    background: none;
    color: black;
    font-size: 12pt;
  }

  .site-header,
  .site-footer,
  .post-nav,
  .post-share,
  .newsletter-cta,
  .darkmode-toggle,
  .skip-link,
  .pagination {
    display: none;
  }

  .post-content a {
    color: black;
    text-decoration: underline;
  }

  /* Show URL after external links */
  .post-content a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: gray;
  }

  .post-content .kg-width-wide,
  .post-content .kg-width-full {
    max-width: 100%;
    margin-left: 0;
    transform: none;
    width: auto;
  }
}


/* ==========================================================================
   14. Animations & motion
   Subtle fade-in on scroll. Respects prefers-reduced-motion.
   ========================================================================== */

.fade-in {
  opacity: 0;
  transform: translateY(var(--space-4));
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}