/* ============================================================
   digimin — main stylesheet
   Generator-agnostic. Plain CSS, no preprocessor.
   HTML4-forward compatible. No JavaScript dependency.
   Legible in text-only browsers (w3m, lynx).
   ============================================================ */

/* bitter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/bitter-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* bitter-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/bitter-v40-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* bitter-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/bitter-v40-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-serif-4-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/source-serif-4-v14-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-serif-4-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/source-serif-4-v14-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-serif-4-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/source-serif-4-v14-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-serif-4-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/source-serif-4-v14-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-serif-4-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/source-serif-4-v14-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-serif-4-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/source-serif-4-v14-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ============================================================
   SPACING KNOBS
   Adjust these to control global density.
   ============================================================ */
:root {
  --header-pad-v:       0.55rem;  /* vertical padding inside the site header bar */
  --hero-pad-top:       1.8rem;   /* space above the page title in .page-hero */
  --hero-pad-bottom:    0.8rem;   /* space below lede in .page-hero */
  --content-pad-top:    1.6rem;   /* space from hero (or header) to body text */
  --content-pad-bottom: 3.5rem;   /* space below body text, above footer */
  --footer-gap-top:     1rem;     /* margin above the footer, 2rem before */
  --footer-pad-v:       0.9rem;   /* 1.8 before; vertical padding inside footer */
  --section-gap:        1.8rem;   /* vertical gap between .content-section blocks */
}


/* ============================================================
   COLOR PALETTES
   One block active at a time — comment the others out.
   Color descriptions appear inline after each value.
   ============================================================ */

/* --- PALETTE A: Warm teal (original) ---------------------- */
/*
:root {
  --ink:         #1a1a18;
  --ink-mid:     #4a4a46;
  --ink-light:   #7a7a74;
  --paper:       #f5f3ee;
  --paper-mid:   #ede9e1;
  --paper-warm:  #e8e3d8;
  --accent:      #3d6b6b;
  --accent-mid:  #2e5252;
  --accent-pale: #d4e5e5;
  --rule:        #d0ccc2;
}
*/

/* --- PALETTE B: High contrast, cool blue --------- */
/*
:root {
  --ink:         #0f0f0f;
  --ink-mid:     #3a3a3a;
  --ink-light:   #6a6a6a;
  --paper:       #fafafa;
  --paper-mid:   #f0f0f0;
  --paper-warm:  #e8e8e8;
  --accent:      #1a4a6b;
  --accent-mid:  #0f3352;
  --accent-pale: #d0dde8;
  --rule:        #d4d4d4;
}
*/

/* --- PALETTE C: Warm earthy, amber/rust ------------------- */
/*
:root {
  --ink:         #1c1510;
  --ink-mid:     #4a3f35;
  --ink-light:   #7a6e62;
  --paper:       #fdf8f2;
  --paper-mid:   #f4ece0;
  --paper-warm:  #ecdecf;
  --accent:      #8b3a00;
  --accent-mid:  #6a2c00;
  --accent-pale: #f0d8c8;
  --rule:        #d8ccbc;
}
*/

/* --- PALETTE D: Dark / night reading ---------------------- */

:root {
  --ink:         #e8e6e0;
  --ink-mid:     #b0ada6;
  --ink-light:   #7a7870;
  --paper:       #191917;
  --paper-mid:   #222220;
  --paper-warm:  #2c2c28;
  --accent:      #7eb8a0;
  --accent-mid:  #5a9e86;
  --accent-pale: #1e3530;
  --rule:        #3a3a36;
}



/* ============================================================
   TYPOGRAPHY & LAYOUT VARIABLES
   ============================================================ */
:root {
  --font-body:  'Source Serif 4', 'Georgia', 'Times New Roman', serif;
  --font-head:  'Bitter', 'Georgia', 'Times New Roman', serif;
  --font-mono:  'Courier New', 'Courier', monospace;

  --body-width: 72ch;    /* width of the main text column */
  --page-width: 90ch;    /* max width of full-page containers */
  --page-pad:   0rem;    /* horizontal padding on page containers */
/*  --page-pad:   2rem;    */

  --space-xs:   0.3rem;
  --space-s:    0.6rem;
  --space-m:    1.2rem;
  --space-l:    2rem;
  --space-xl:   3.5rem;
  --space-xxl:  5.5rem;
}


/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 18px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: var(--space-s);
}

h1 { font-size: 2.1rem; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; letter-spacing: -0.01em; margin-top: var(--space-l); }
h3 { font-size: 1.15rem; margin-top: var(--space-m); }
h4 { font-size: 1rem; }

p { margin-bottom: var(--space-m); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-pale);
  text-underline-offset: 3px;
  transition: color 0.15s, text-decoration-color 0.15s;
}

a:hover, a:focus {
  color: var(--accent-mid);
  text-decoration-color: var(--accent);
}

a:visited { color: var(--ink-mid); }

blockquote {
  border-left: 3px solid var(--accent);
  padding-left: var(--space-m);
  margin: var(--space-l) 0;
  color: var(--ink-mid);
  font-style: italic;
}

hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: var(--space-l) 0;
}

ul, ol {
  padding-left: var(--space-m);
  margin-bottom: var(--space-m);
}

li { margin-bottom: var(--space-xs); }

small, .meta {
  font-size: 0.8rem;
  color: var(--ink-light);
  font-family: var(--font-head);
  letter-spacing: 0.03em;
}

code, pre {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
}

code { padding: 0.1em 0.35em; }

pre {
  padding: var(--space-m);
  overflow-x: auto;
  margin-bottom: var(--space-m);
}


/* ============================================================
   PAGE STRUCTURE
   ============================================================ */
.site-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-main { flex: 1; }


/* ============================================================
   SITE HEADER & NAV
   ============================================================ */
.site-header {
  background-color: var(--paper-mid);
  border-bottom: 2px solid var(--ink);
  padding: var(--header-pad-v) 0;
}

.site-header .inner {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  /*flex-wrap: wrap;
  gap: var(--space-xs) var(--space-m);*/
  gap: var(--space-s);
  /* No flex-wrap here — see media query below */
}

.site-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;          /* nav items can wrap within the nav */
  gap: 0.15rem 1.1rem;     /* tight fixed gaps, not variable-based */
  justify-content: flex-end;
}


.site-nav li { margin: 0; }

.site-nav a {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mid);
  text-decoration: none;
  white-space: nowrap;      /* individual items never break mid-word */
}

.site-nav a:hover,
.site-nav a:focus { color: var(--accent); }

.site-nav a.active,
.site-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
  border-bottom: 2px solid var(--accent);
}

/* Below ~520px: stack logo above nav, both full-width */
@media (max-width: 520px) {
  .site-header .inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }

  .site-nav ul {
    justify-content: flex-start;
    gap: 0.15rem 0.9rem;
  }
}

.site-title {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}

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

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

.site-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-m);
}

.site-nav li { margin: 0; }

.site-nav a {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mid);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus { color: var(--accent); }

.site-nav a.active,
.site-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
  border-bottom: 2px solid var(--accent);
}


/* ============================================================
   PAGE HERO
   Optional. Remove the .page-hero element from any page
   to skip it; content will follow the header directly.

   Layout: kicker full-width, then a two-column row with
   h1 left and author+date right, then hairline + lede.
   On narrow viewports the two columns stack naturally.
   ============================================================ */

.page-hero {
  border-bottom: 1px solid var(--rule);
  padding: var(--hero-pad-top) 0 var(--hero-pad-bottom);
}

.page-hero .inner {
  /*max-width: var(--page-width);*/
  max-width: var(--body-width);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

/* Eyebrow label above the title row */
.page-hero .kicker {
  font-family: var(--font-head);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: var(--space-xs);
}

/* Two-column row: h1 left, meta right, aligned to baseline */
.page-hero .title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-m);
  margin-bottom: var(--space-s);
}

.page-hero .title-row h1 {
  margin: 0;
  flex: 1;
}

/* Meta block: author on top, date below, right-aligned */
.page-hero .meta-block {
  text-align: left;
  /*text-align: right; */
  flex-shrink: 0;
  padding-bottom: 0.2rem;   /* optical baseline alignment with h1 */
}

.page-hero .meta-author {
  font-family: var(--font-head);
  font-size: 0.82rem;
  color: var(--ink-mid);
  display: block;
  margin-bottom: 0.1rem;
}

.page-hero .meta-date {
  font-family: var(--font-head);
  font-size: 0.78rem;
  color: var(--ink-light);
  display: block;
}

/* Hairline between title row and lede */
.page-hero .meta-rule {
  border: none;
  border-top: 1px solid var(--rule);
  margin: var(--space-s) 0;
}

.page-hero .lede {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-mid);
  max-width: var(--body-width);
  /*margin-bottom: 0;*/
  margin: 0;
}

/* Narrow viewports: stack title above meta, meta left-aligned */
@media (max-width: 520px) {
  .page-hero .title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }

  .page-hero .meta-block {
    text-align: left;
  }
}

/* ============================================================
   CONTENT BODY
   Generic container for all written-content pages.
   ============================================================ */
.content-body {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--content-pad-top) var(--page-pad) var(--content-pad-bottom);
}

/* Text column: centered, width-controlled, justified */
.content-text {
  max-width: var(--body-width);
  margin: 0 auto;
  text-align: justify;
  hyphens: auto;
}

/* Override element-level max-width so everything inherits from .content-text */
.content-text p,
.content-text ul,
.content-text ol,
.content-text blockquote,
.content-text pre { max-width: none; }

/* Headings left-aligned regardless of justify */
.content-text h1,
.content-text h2,
.content-text h3,
.content-text h4 { text-align: left; }

/* Named section blocks within content */
.content-section { margin-bottom: var(--section-gap); }
.content-section:last-child { margin-bottom: 0; }

/* Pull quote */
.pull-quote {
  font-family: var(--font-head);
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--accent-mid);
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--rule);
  padding: var(--space-m) 0;
  margin: var(--space-l) 0;
  text-align: left;
}

/* Inset / callout block (personal notes, asides within text) */
.inset {
  padding: var(--space-m) var(--space-l);
  background: var(--paper-mid);
  border-left: 3px solid var(--accent);
  margin: var(--space-l) 0;
}

.inset p {
  font-size: 0.95rem;
  color: var(--ink-mid);
  margin-bottom: var(--space-m);
}

.inset p:last-child { margin-bottom: 0; }

/* Small label / eyebrow above sections */
.label {
  font-family: var(--font-head);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-light);
  display: block;
  margin-bottom: var(--space-s);
}


/* ============================================================
   HOME PAGE
   The home page departs from generic content layout.
   ============================================================ */
.home-intro {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--content-pad-top) var(--page-pad) var(--section-gap);
}

.site-desc {
  font-size: 1.2rem;
  line-height: 1.65;
  max-width: var(--body-width);
  margin-bottom: var(--space-m);
  color: var(--ink);
}

.site-desc strong {
  color: var(--accent);
  font-weight: inherit;
}

.tagline {
  font-size: 0.92rem;
  color: var(--ink-mid);
  margin-bottom: var(--space-l);
}

.section-rule-label {
  font-family: var(--font-head);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-light);
  display: block;
  margin-bottom: var(--space-m);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--rule);
}

.section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1px;
  background-color: var(--rule);
  border: 1px solid var(--rule);
}

.section-card {
  background-color: var(--paper);
  padding: var(--space-m);
  text-decoration: none;
  display: block;
  transition: background-color 0.15s;
}

.section-card:hover,
.section-card:focus {
  background-color: var(--accent-pale);
  text-decoration: none;
}

.section-card .card-label {
  font-family: var(--font-head);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: var(--space-xs);
}

.section-card h3 {
  font-size: 1rem;
  color: var(--ink);
  margin: 0 0 var(--space-xs);
}

.section-card p {
  font-size: 0.84rem;
  color: var(--ink-mid);
  line-height: 1.5;
  margin: 0;
}


/* ============================================================
   SITE FOOTER
   ============================================================ */
.site-footer {
  background-color: var(--paper-mid);
  border-top: 1px solid var(--rule);
  padding: var(--footer-pad-v) 0;
  margin-top: var(--footer-gap-top);
}

.site-footer .inner {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 3rem; /* 1.5rem before; fixed gaps; row gap tighter than column */
  /*justify-content: space-between;*/
  justify-content: flex-start;  /* left-anchor so columns read L→R */
  align-items: flex-start;
}

.footer-col {
  min-width: 8rem;           /* prevents a column collapsing to near-zero */
}

.footer-col h4 {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: var(--space-s);
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li { margin-bottom: var(--space-xs); }

.footer-col a {
  font-size: 0.85rem;
  color: var(--ink-mid);
  text-decoration: none;
}

.footer-col a:hover { color: var(--accent); }

.footer-bottom {
  max-width: var(--page-width);
  margin: var(--space-m) auto 0;
  padding: var(--space-s) var(--page-pad) 0; /* --space-m before */
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  justify-content: space-between;
  align-items: center;
}

.footer-bottom p {
  font-size: 0.76rem;
  color: var(--ink-light);
  margin: 0;
}

.rss-link {
  font-family: var(--font-head);
  font-size: 0.73rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--accent);
  padding: 0.15em 0.5em;
}

.rss-link:hover {
  background: var(--accent);
  color: var(--paper);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
  html { font-size: 17px; }

  :root {
    --page-pad:   1.1rem;
    --body-width: 100%;
  }

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.35rem; }

/* the below prevents the footer columns from adjusting one-by-one */
/*  .site-footer .inner {
    flex-direction: column;
    gap: var(--space-m);
  }*/

  .section-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  html { font-size: 16px; }
}


/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .site-nav,
  .site-footer { display: none; }

  body { background: white; color: black; font-size: 11pt; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* ============================================================
   WRITINGS INDEX PAGE
   For the full archive listing and the recent-posts section.
   ============================================================ */

/* Outer wrapper — same as .content-body */
/*.writings-body {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--content-pad-top) var(--page-pad) var(--content-pad-bottom);
}*/

/* Section heading row: "Recent" or "All writings" + item count */
.writings-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0;
  margin-bottom: 0;
}

.writings-section-head .section-name {
  font-family: var(--font-head);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-light);
}

.writings-section-head .section-count {
  font-family: var(--font-head);
  font-size: 0.72rem;
  color: var(--ink-light);
}

/* Individual writing entry */
.writing-entry {
  display: grid;
  grid-template-columns: 7rem 1fr;  /* date col | content col */
  gap: 0 var(--space-m);
  padding: 0.20rem 0;
  /*padding: var(--space-m) 0;*/
  border-bottom: 1px solid var(--rule);
  align-items: start;
}

.writing-entry:last-child {
  border-bottom: none;
}

/* Date column */
.writing-date {
  font-family: var(--font-head);
  font-size: 0.78rem;
  color: var(--ink-light);
  padding-top: 0.15rem;     /* optical alignment with entry title */
  white-space: nowrap;
}

/* Content column */
.writing-content { }

.writing-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* Horizontal space between metadata items */
  gap: 0 0.5rem;
  /*margin-bottom: 0.2rem;*/
  margin-bottom: 0;
}

.writing-category {
  font-family: var(--font-head);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.writing-meta .sep {
  font-size: 0.68rem;
  color: var(--rule);
  user-select: none;
}

.writing-title {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  display: block;
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.writing-title:hover {
  color: var(--accent);
  text-decoration: none;
}

.writing-desc {
  font-size: 0.88rem;
  color: var(--ink-mid);
  line-height: 1.55;
  margin: 0;
}

/* Compact variant: no description, tighter padding */
/* Add class .writing-entry--compact for the full index */
.writing-entry--compact {
  padding: 0.20rem 0;
}

.writing-entry--compact .writing-desc {
  display: none;
}

/* Gap between Recent section and All Writings section */
.writings-gap {
  margin-top: var(--space-xl);
}

/* Responsive: collapse date column on narrow viewports */
@media (max-width: 560px) {
  .writing-entry {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .writing-date {
    font-size: 0.72rem;
  }
}