/* ============================================================
   FLEXOKI CUSTOM PROPERTIES
   ============================================================ */

:root {
  /* Backgrounds */
  --bg:   #FFFCF0;
  --bg-2: #F2F0E5;

  /* Text */
  --tx:   #100F0F;
  --tx-2: #6F6E69;
  --tx-3: #B7B5AC;

  /* UI surfaces / borders */
  --ui:   #CECDC3;
  --ui-2: #DAD8CE;
  --ui-3: #E6E4D9;

  /* Accent */
  --accent:       #5E409D;
  --accent-hover: #735EB5;

  /* Typography */
  --font-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-heading: 'Fraunces', Georgia, serif;
  --font-logo:    'Fraunces', Georgia, serif;
  --font-ui:      'JetBrains Mono', monospace;
  --font-code:    'JetBrains Mono', monospace;

  /* Minor-third scale (1.2×), base 22 px */
  --text-xs:      0.9375rem; /* 15px  – mono UI labels */
  --text-sm:      1.15rem;   /* 18px  – small text */
  --text-base:    1.375rem;  /* 22px  – body */
  --text-lg:      1.65rem;   /* 26px  – h3 */
  --text-xl:      2rem;      /* 32px  – h2 */
  --text-2xl:     2.375rem;  /* 38px  – h1 */
  --text-display: 3.425rem;  /* 55px  – masthead, featured title */

  --size:    var(--text-base);
  --lh:      1.6;
  --measure: 46.75rem; /* ≈ 34em at body 22px; rem keeps the layout cap stable in smaller-text contexts (e.g. footer) */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:   #100F0F;
    --bg-2: #1C1B1A;

    --tx:   #FFFCF0;
    --tx-2: #878580;
    --tx-3: #575653;

    --ui:   #403E3C;
    --ui-3: #282726;

    --accent:       #8B7EC8;
    --accent-hover: #A699D0;
  }
}

/* ============================================================
   RESET & BASE
   ============================================================ */

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

html {
  font-size: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--size);
  line-height: var(--lh);
  font-weight: 400;
  color: var(--tx);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

figure {
  margin: 2rem 0;
}

figure img,
figure picture {
  display: block;
  margin: 0 auto;
}

figcaption {
  margin-top: 0.5rem;
  font-size: var(--text-sm);
  color: var(--tx-2);
  text-align: center;
}

/* ============================================================
   LAYOUT
   ============================================================ */

.site-wrapper {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ============================================================
   HEADER & NAV
   ============================================================ */

.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 2.5rem 0 2rem;
  border-bottom: 1px solid var(--ui-3);
  margin-bottom: 3rem;
  max-width: var(--measure);
}

.site-title {
  font-family: var(--font-logo);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--tx);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.site-title:hover {
  color: var(--accent);
}

.site-nav-link {
  color: var(--tx-2);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-nav-link:hover {
  color: var(--tx);
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  border-top: 1px solid var(--ui-3);
  margin-top: 4rem;
  padding: 2rem 0 3rem;
  color: var(--tx-3);
  font-size: var(--text-sm);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--tx);
}

h1 { font-size: var(--text-2xl); margin-top: 0;      margin-bottom: 1.5rem; }
h2 { font-size: var(--text-xl);  margin-top: 3rem;   margin-bottom: 1rem; }
h3 { font-size: var(--text-lg);  margin-top: 2.5rem; margin-bottom: 0.75rem; }
h4 { font-size: var(--text-base); margin-top: 2rem;  margin-bottom: 0.5rem; }
h5 { font-size: var(--text-sm);  margin-top: 1.75rem; margin-bottom: 0.5rem; color: var(--tx-2); }
h6 {
  font-size: var(--text-sm);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--tx-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

p {
  margin-bottom: 1.25rem;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--accent-hover);
  text-decoration-thickness: 2px;
}

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

strong, b {
  font-weight: 700;
}

em, i {
  font-style: italic;
}

/* ============================================================
   LISTS
   ============================================================ */

ul {
  padding-left: 1.75rem;
  margin-bottom: 1.25rem;
}

ol {
  padding-left: 2.5rem;
  margin-bottom: 1.25rem;
}

li {
  margin-bottom: 0.4rem;
}

li > ul,
li > ol {
  margin-top: 0.4rem;
  margin-bottom: 0;
}

/* ============================================================
   CODE
   ============================================================ */

code {
  font-family: var(--font-code);
  font-size: 0.875em;
  background: var(--bg-2);
  border: 1px solid var(--ui);
  border-radius: 3px;
  padding: 0.1em 0.35em;
  font-feature-settings: "liga" 1, "calt" 1;
}

pre {
  background: var(--bg-2);
  border: 1px solid var(--ui);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

pre code {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 0.875em;
  color: var(--tx);
}

/* ============================================================
   BLOCKQUOTE
   ============================================================ */

blockquote {
  border-left: 3px solid var(--ui);
  padding-left: 1.5rem;
  margin: 1.5rem 0;
  color: var(--tx-2);
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   HR
   ============================================================ */

hr {
  border: none;
  border-top: 1px solid var(--ui-3);
  margin: 3rem 0;
}

/* ============================================================
   HOMEPAGE
   ============================================================ */

.masthead {
  font-family: var(--font-logo);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1;
  color: var(--tx);
  margin: 0;
}

.masthead a {
  color: inherit;
  text-decoration: none;
}

.home .site-header {
  padding: 2.5rem 0 2rem;
  margin-bottom: 2.5rem;
}

.home .site-nav-link {
  font-size: var(--text-xs);
}

.site-tagline {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-style: italic;
  color: var(--tx-2);
  max-width: var(--measure);
  margin: 0 0 3rem;
}

/* ------------------------------------------------------------
   HOME — EDITORIAL LANDING
   ------------------------------------------------------------ */

/* Lede — opening paragraph */

.home-lede {
  margin: 1.25rem 0 4rem;
  max-width: 38rem;
}

.home-lede p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--tx);
  margin: 0;
}

/* Dossier — small grid of "currently" facts */

.home-dossier {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--ui);
}

.home-dossier-cell {
  padding: 1.4rem 1.5rem 1.4rem 1.25rem;
  border-right: 1px dotted var(--ui);
}

.home-dossier-cell:first-child { padding-left: 0; }
.home-dossier-cell:last-child { border-right: none; }

.home-dossier-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-2);
  margin-bottom: 0.6rem;
}

.home-dossier-value {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-variation-settings: "opsz" 24;
  line-height: 1.25;
  color: var(--tx);
  text-wrap: balance;
}

.home-dossier-value em {
  font-family: var(--font-body);
  font-style: italic;
  font-variation-settings: normal;
  font-size: 1.05rem;
  color: var(--tx-2);
}

.home-dossier-value a,
.home-foot-links a {
  color: var(--tx);
  text-decoration: underline;
  text-decoration-color: var(--ui);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s, text-decoration-color 0.2s;
}

.home-dossier-value a:hover,
.home-foot-links a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
}

@media (max-width: 720px) {
  .home-dossier {
    grid-template-columns: 1fr 1fr;
  }
  .home-dossier-cell {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .home-dossier-cell:nth-child(2n) { border-right: none; }
  .home-dossier-cell:nth-child(-n+2) { border-bottom: 1px dotted var(--ui); }
  .home-dossier-cell:nth-child(odd) { padding-left: 0; }
}

/* Section heading */

.home-section {
  max-width: var(--measure);
  margin-bottom: 4rem;
}

.home-section-head {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--tx);
  margin-bottom: 0;
}

.home-section-head h2 {
  font-family: var(--font-logo);
  font-size: 1.1rem;
  font-weight: 600;
  font-variation-settings: "opsz" 24;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}

/* Footer */

.home .site-footer,
.post-page .site-footer {
  display: block;
  border-top: 1px dotted var(--ui);
  padding: 1.75rem 0 3rem;
  margin-top: 5rem;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0;
  color: var(--tx);
  text-transform: none;
  max-width: var(--measure);
}

.home-foot-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.25rem;
}

.home-foot-links a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.home-colophon {
  padding-top: 1.25rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tx-2);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.home-colophon a {
  color: inherit;
  text-decoration-color: var(--ui);
}

.home-colophon a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* ------------------------------------------------------------
   WRITING TIMELINE
   ------------------------------------------------------------ */

.writing-list {
  list-style: none;
  padding: 2rem 0 0;
  margin: 0;
}

.writing-list > li {
  margin: 0;
}

.writing-entry {
  display: grid;
  grid-template-columns: 7rem 2.5rem minmax(0, 1fr);
  align-items: start;
  text-decoration: none;
  color: inherit;
  position: relative;
  padding: 0 0 2.5rem;
}

.writing-list > li:last-child .writing-entry {
  padding-bottom: 0;
}

/* Per-entry segment of the vertical line, drawn through the middle column */
.writing-entry::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(7rem + 1.25rem);
  width: 1px;
  background: var(--ui);
}

/* First entry: start line at the marker, not above */
.writing-list > li:first-child .writing-entry::before {
  top: 0.75rem;
}

/* Last entry: stop line a touch past the marker */
.writing-list > li:last-child .writing-entry::before {
  bottom: auto;
  height: 3rem;
}

.writing-date {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--tx-2);
  line-height: 1.4;
  padding-top: 0.35rem;
  text-align: right;
  white-space: nowrap;
}

.writing-marker {
  width: 0.65rem;
  height: 0.65rem;
  justify-self: center;
  margin-top: 0.55rem;
  border-radius: 50%;
  border: 1px solid var(--tx-3);
  background: var(--bg);
  position: relative;
  z-index: 1;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.writing-content {
  padding-left: 1.5rem;
}

.writing-eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

.writing-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--tx);
  transition: color 0.2s ease;
}

.writing-entry-latest .writing-title {
  font-size: clamp(1.75rem, 3.4vw, 2.4rem);
  font-variation-settings: "opsz" 100, "SOFT" 30;
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin-bottom: 0.85rem;
}

.writing-excerpt {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--tx-2);
  margin: 0;
  max-width: 34em;
  text-wrap: pretty;
}

.writing-entry:hover .writing-marker {
  background: var(--accent);
  border-color: var(--accent);
}

.writing-entry:hover .writing-title {
  color: var(--accent);
}

/* Mobile: collapse the timeline into a stacked list */
@media (max-width: 720px) {
  .writing-list {
    padding-top: 1.5rem;
  }

  .writing-entry {
    display: block;
    padding: 0 0 2rem;
  }

  .writing-entry::before,
  .writing-marker {
    display: none;
  }

  .writing-date {
    display: block;
    padding-top: 0;
    margin-bottom: 0.4rem;
  }

  .writing-content {
    padding-left: 0;
  }
}

/* ============================================================
   SINGLE POST
   ============================================================ */

/* Post page header */

.post-page .site-header {
  margin-bottom: 0;
}

/* Cap article column at measure. No-op when .post is display:contents inside
   .post-layout; the grid's column 1 enforces measure there. */
.post-page .post {
  max-width: var(--measure);
}

/* Post hero (cover image as header background) */

.post-hero {
  position: relative;
}

.post-hero-cover {
  width: 100%;
  height: auto;
  display: block;
}

.post-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 14rem;
  background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 70%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}

.post-hero .site-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  max-width: none;
  padding: 0 3rem;
}

.post-hero .masthead {
  color: #FFFCF0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}

.post-hero .site-nav-link {
  color: rgba(255,252,240,0.85);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.post-hero .site-nav-link:hover {
  color: #FFFCF0;
}

.post-hero .site-header {
  border-bottom-color: rgba(255,252,240,0.2);
  max-width: none;
}

/* Post header */

.post-header {
  margin-bottom: 3rem;
  padding-top: 3rem;
}

.post-header h1 {
  font-size: var(--text-display);
  font-weight: 700;
  line-height: 1.13;
  letter-spacing: -0.02em;
  margin-bottom: 0;
}

.post-date {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx-2);
  margin-bottom: 1rem;
}

/* Post body typography */

.post {
  font-size: var(--text-base);
  line-height: var(--lh);
}

.post blockquote {
  border-left: 3px solid var(--ui);
  padding-left: 1.5rem;
  margin: 2rem 0;
  color: var(--tx-2);
  font-style: italic;
}

.post blockquote cite {
  font-style: italic;
}

/* ============================================================
   MARGIN ANNOTATIONS
   ============================================================ */

/*
  Layout: <main class="post-layout"> wraps <article class="post">.
  The article uses display:contents so its children share a single
  CSS-grid. Body children fill column 1 (article column, measure-wide);
  margin-note children slot into column 2 at explicit grid-rows. The
  grid extends rightward beyond the centered site-wrapper via negative
  margin-right, so notes appear aside the post container in the gutter.
  On narrow viewports the grid collapses to a single column and the
  notes appear inline, interleaved with the article text.
*/

.post-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) 13rem;
  column-gap: 2rem;
  margin-right: -15rem;
}

.post-layout > .post {
  display: contents;
}

.post-layout > .post > *:not(.margin-note) {
  grid-column: 1;
}

/* ---- Base text annotations (shared) ---- */

.margin-note {
  grid-column: 2;
  align-self: start;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--tx-2);
}

/* Variant: ghost — barely visible, whisper-thin border */
.margin-note-ghost {
  border-left: 1px solid var(--ui-3);
  padding-left: 1rem;
}

/* ---- Annotation responsive collapse ----
   Collapse when the right gutter can no longer fit the notes column.
   Wrapper max ≈ 812px; we need viewport ≥ 812 + 2·(2rem + 13rem) ≈ 1324px.
*/

@media (max-width: 1340px) {
  .post-layout {
    display: block;
    margin-right: 0;
  }

  .post-layout > .post {
    display: block;
  }

  /* Inline notes: spacing */
  .margin-note {
    margin: 1.5rem 0;
  }

  /* Left border → top border */
  .margin-note-ghost {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--ui-3);
    padding-top: 1rem;
  }
}

/* ============================================================
   UTILITY
   ============================================================ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .masthead {
    font-size: var(--text-xl);
  }

  .post-row {
    padding: 1.25rem 0;
  }

  .post-header {
    padding-top: 2rem;
  }

  .post-header h1 {
    font-size: var(--text-xl);
  }
}