/* ============================================================
   MINT by Nana Kofi. Editorial theme.
   Ported from the approved design demo. Based on Arabica.
   Loaded after normalize.css and fonts.css.
   ============================================================ */

:root {
  --paper:   #FBF8F3;
  --paper-2: #F4EEE2;
  --ink:     #1D1A16;
  --ink-soft:#3B352D;
  --muted:   #6E675D;
  --accent:  #7A2E28;
  --accent-2:#9A463C;
  --rule:    #E4DBCB;
  --shadow:  rgba(45,33,20,0.12);

  /* Fraunces and Newsreader, which this theme used, have NO Cyrillic at all.
     Verified against the Ukrainian alphabet, not merely "cyrillic": fonts that
     cover Russian and drop i i ie g are common, and here that is every other
     word. Replaced with two that carry the full set, checked in the woff2
     files actually served. See scripts/fetch-fonts.py. */
  --serif-display: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --serif-body:    "Literata", Georgia, "Times New Roman", serif;
  --sans:          system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:          ui-monospace, SFMono-Regular, Menlo, monospace;

  --read: 39rem;
  --wide: 64rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#16130F; --paper-2:#1F1B15; --ink:#EDE5D8; --ink-soft:#CFC7B8;
    --muted:#9A9285; --accent:#CD6C60; --accent-2:#E08A7E; --rule:#2C2720; --shadow:rgba(0,0,0,0.5);
  }
}
:root[data-theme="light"] {
  --paper:#FBF8F3; --paper-2:#F4EEE2; --ink:#1D1A16; --ink-soft:#3B352D;
  --muted:#6E675D; --accent:#7A2E28; --accent-2:#9A463C; --rule:#E4DBCB; --shadow:rgba(45,33,20,0.12);
}
:root[data-theme="dark"] {
  --paper:#16130F; --paper-2:#1F1B15; --ink:#EDE5D8; --ink-soft:#CFC7B8;
  --muted:#9A9285; --accent:#CD6C60; --accent-2:#E08A7E; --rule:#2C2720; --shadow:rgba(0,0,0,0.5);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: 18px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .4s ease, color .4s ease;
}
img { max-width: 100%; height: auto; }
::selection { background: var(--accent); color: var(--paper); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ---------- masthead ---------- */
.main-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.masthead-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: var(--wide); margin: 0 auto; padding: .85rem 1.5rem;
}
.blog-title { margin: 0; font-size: inherit; }
.blog-title a { display: flex; align-items: baseline; gap: .55rem; color: inherit; }
.blog-title .mark {
  font-family: var(--serif-display); font-weight: 600; letter-spacing: .28em;
  font-size: 1.18rem; padding-left: .28em; color: var(--ink);
}
.blog-title .by {
  font-family: var(--sans); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.blog-description { display: none; }
nav.nav { display: flex; align-items: center; gap: 1.4rem; }
nav.nav a {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); padding: .2rem 0; position: relative; transition: color .2s;
}
nav.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1.5px;
  background: var(--accent); transition: right .25s ease;
}
nav.nav a:hover { color: var(--ink); }
nav.nav a.nav-current { color: var(--ink); }
nav.nav a.nav-current::after { right: 0; }
.mint-theme-toggle {
  font-family: var(--sans); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--rule); background: var(--paper-2); color: var(--muted);
  border-radius: 999px; padding: .35rem .7rem; cursor: pointer; transition: all .2s;
}
.mint-theme-toggle:hover { color: var(--ink); border-color: var(--accent); }

/* ---------- content column ---------- */
.content { max-width: var(--read); margin: 0 auto; padding: 0 1.5rem; }
.content.mint-wide { max-width: var(--wide); }

/* ---------- home: lede + featured ---------- */
.mint-lede { padding: 3.6rem 0 1.2rem; }
.mint-eyebrow {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1.4rem;
}
.mint-featured { display: flex; flex-direction: column; gap: 2.3rem; }
.feat h2 {
  font-family: var(--serif-display); font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(1.7rem, 4vw, 2.35rem); line-height: 1.1; margin: 0 0 .5rem; text-wrap: balance;
}
.feat h2 a { color: var(--ink); }
.feat:hover h2 a { color: var(--accent); }
.feat .stand { color: var(--ink-soft); font-size: 1.08rem; margin: 0 0 .7rem; max-width: 36rem; }
.post-meta, .meta {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.post-meta a { color: var(--muted); }
.post-meta a:hover { color: var(--accent); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }

/* ---------- home: year index ---------- */
.mint-index { padding: 3rem 0 4.5rem; border-top: 1px solid var(--rule); margin-top: 3rem; }
/* With no titled essays there is no lede at all, so the index is the first
   thing on the page and must not carry the rule and margin that were there to
   separate it from a featured block. Compound selector so it wins on
   specificity, not on source order. */
.mint-index.mint-index-first { margin-top: 0; border-top: 0; padding-top: 1.6rem; }
.mint-index-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.6rem; }
.mint-index-head h2, .mint-index-head h3 {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin: 0;
}
.mint-index-head .count { font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.mint-year {
  font-family: var(--serif-display); font-size: 1.05rem; color: var(--muted); font-style: italic;
  margin: 2rem 0 .3rem;
}
.mint-entries { list-style: none; margin: 0; padding: 0; }
.mint-entries li { border-bottom: 1px solid var(--rule); }
.mint-entry {
  display: grid; grid-template-columns: 4.6rem 1fr auto; align-items: baseline; gap: 1rem;
  padding: .85rem 0; color: inherit;
}
.mint-entry .date {
  font-family: var(--mono); font-size: .78rem; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mint-entry .ttl {
  font-family: var(--serif-body); font-size: 1.12rem; color: var(--ink); line-height: 1.35; transition: color .18s;
}
.mint-entry:hover .ttl { color: var(--accent); }
.mint-entry .topic {
  font-family: var(--sans); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; gap: .4rem; white-space: nowrap;
}

/* ---------- single post ---------- */
.post { padding: 3rem 0 4rem; }
.mint-backlink {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2.2rem; display: inline-flex; align-items: center; gap: .5rem;
}
.mint-backlink:hover { color: var(--accent); }
.post-eyebrow {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1rem;
}
.post-title {
  font-family: var(--serif-display); font-weight: 600; letter-spacing: -.015em;
  font-size: clamp(2rem, 5.5vw, 3.1rem); line-height: 1.06; margin: 0 0 1rem; text-wrap: balance;
}
.post-header .post-meta { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: .8rem 0; margin: 1.6rem 0 2.4rem; }
.post-header > img, .post-content img { border-radius: 3px; box-shadow: 0 12px 40px -12px var(--shadow); }
.post-header > img { margin: 1.6rem 0; width: 100%; }

.post-content { font-size: 1.06rem; }
.post-content p { margin: 0 0 1.4rem; }
.post-content > p:first-of-type::first-letter {
  font-family: var(--serif-display); float: left; font-size: 3.4rem; line-height: .8;
  padding: .35rem .55rem 0 0; color: var(--accent);
}
.post-content h2, .post-content h3, .post-content h4 {
  font-family: var(--serif-display); font-weight: 600; letter-spacing: -.01em; margin: 2.4rem 0 .8rem; line-height: 1.2;
}
.post-content h2 { font-size: 1.6rem; }
.post-content h3 { font-size: 1.4rem; }
.post-content blockquote {
  font-family: var(--serif-display); font-size: 1.5rem; line-height: 1.35; font-style: italic;
  color: var(--ink); border-left: 3px solid var(--accent); padding: .3rem 0 .3rem 1.4rem;
  margin: 2.2rem 0; max-width: 32rem;
}
.post-content blockquote p { margin: 0; }
.post-content a { border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.post-content a:hover { border-bottom-color: var(--accent); }
.post-content figure { margin: 2.6rem 0; }
.post-content figcaption, .post-content img + em {
  font-family: var(--sans); font-size: .74rem; color: var(--muted); display: block; margin-top: .7rem;
}
/* Pasted YouTube / Spotify / Apple Music links, via _markup/render-link.html.
   The wrapper is a <span> on purpose: a bare link on its own line is still
   wrapped in a <p> by Goldmark, and a <div> or <figure> in there is invalid
   HTML. See the note at the top of that file before changing any of this. */
.post-content .embed { display: block; margin: 2.6rem 0; }
.post-content .embed iframe { display: block; width: 100%; border: 0; border-radius: 6px; }
.post-content .embed-video iframe { aspect-ratio: 16 / 9; height: auto; }
.post-content .embed-audio iframe { height: 352px; }
.post-content .embed-audio-compact iframe { height: 175px; }
/* Hidden here, visible in /feed.json where iframes get stripped by Bluesky,
   Mastodon, LinkedIn and the rest. Without it the song vanishes off-site. */
.post-content .embed-fallback { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.post-content code { font-family: var(--mono); font-size: .9em; background: var(--paper-2); padding: .1em .35em; border-radius: 3px; }
.post-content pre { background: var(--paper-2); padding: 1rem 1.2rem; border-radius: 4px; overflow-x: auto; }
.post-content pre code { background: none; padding: 0; }

.post-footer { border-top: 1px solid var(--rule); margin-top: 3rem; padding-top: 1.6rem; }
.post-footer .tags a {
  font-family: var(--sans); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--rule); border-radius: 999px; padding: .25rem .7rem; margin-right: .4rem;
}
.post-footer .tags a:hover { border-color: var(--accent); color: var(--accent); }

/* prev / next */
.mint-prevnext { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.6rem; }
.mint-prevnext a { display: block; }
.mint-prevnext .lbl { font-family: var(--sans); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: .25rem; }
.mint-prevnext .nxt { font-family: var(--serif-display); font-size: 1.08rem; color: var(--ink); }
.mint-prevnext a:hover .nxt { color: var(--accent); }
.mint-prevnext .next-col { text-align: right; margin-left: auto; }

/* ---------- topic / list pages ---------- */
.mint-list-title { font-family: var(--serif-display); font-size: clamp(2rem,5vw,2.6rem); font-weight: 600; margin: 3.4rem 0 .3rem; letter-spacing: -.01em; }
.mint-list-sub { color: var(--muted); font-style: italic; margin: 0 0 1rem; }
.microblog_category_intro { color: var(--ink-soft); margin-bottom: 1rem; }

/* ---------- gallery ---------- */
.mint-gal-head { padding: 3.4rem 0 1.8rem; }
.mint-gal-head h1 { font-family: var(--serif-display); font-weight: 600; font-size: clamp(2rem,5vw,2.8rem); margin: 0 0 .5rem; letter-spacing: -.01em; }
.mint-gal-head p { color: var(--ink-soft); margin: 0; max-width: 34rem; font-style: italic; }
.mint-gallery { columns: 3 220px; column-gap: 14px; padding-bottom: 4.5rem; }
.mint-shot {
  break-inside: avoid; margin: 0 0 14px; width: 100%; display: block;
  border-radius: 3px; overflow: hidden; position: relative; box-shadow: 0 8px 28px -14px var(--shadow);
  transition: transform .3s, box-shadow .3s; background: var(--paper-2);
}
.mint-shot:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -16px var(--shadow); }

/* The first photograph sits in normal flow and gives the tile its height, so the
   masonry column does not jump when the carousel advances. The rest are laid
   over it and cropped to fit, the way a phone gallery behaves. */
.mint-slides { position: relative; display: block; }
.mint-slide { width: 100%; display: block; cursor: zoom-in; }

/* The first photograph is the base layer. It is never faded out, only covered.
   Fading it out meant that while the next slide was arriving, or crossfading,
   the tile's own background showed through and the whole thing went white. */
.mint-slide:first-child { opacity: 1; }
.mint-slide:not(:first-child) {
  position: absolute; inset: 0; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .28s ease;
}
.mint-slide:not(:first-child).is-on { opacity: 1; }

.mint-shot .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .8rem .6rem;
  background: linear-gradient(transparent, rgba(0,0,0,.6));
  font-family: var(--sans); font-size: .68rem; letter-spacing: .06em;
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
.mint-shot .cap a { color: #fff; border: 0; pointer-events: auto; }
.mint-shot:hover .cap, .mint-shot:focus-within .cap { opacity: 1; }

/* ---------- carousel controls ---------- */
.mint-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.86); color: #1d1a16;
  font-size: 1.1rem; line-height: 1; display: grid; place-items: center;
  opacity: 0; transition: opacity .25s, background .2s; z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
.mint-arrow:hover { background: #fff; }
.mint-prev { left: 8px; }
.mint-next { right: 8px; }
.mint-set:hover .mint-arrow, .mint-set:focus-within .mint-arrow { opacity: 1; }
.mint-arrow:focus-visible { opacity: 1; }
.mint-arrow[disabled] { display: none; }

.mint-dots {
  position: absolute; left: 0; right: 0; bottom: 8px; z-index: 2;
  display: flex; justify-content: center; gap: 5px; pointer-events: auto;
}
.mint-dot {
  width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.5); transition: background .2s, transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.mint-dot.is-on { background: #fff; transform: scale(1.25); }
.mint-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* The 1/3 badge, so a set reads as a set before you touch it. */
.mint-count {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .04em;
  color: #fff; background: rgba(0,0,0,.55); padding: .18rem .4rem; border-radius: 10px;
  backdrop-filter: blur(2px);
}

.mint-gallery-empty { color: var(--muted); font-style: italic; }

/* ---------- lightbox ---------- */
.mint-lightbox {
  position: fixed; inset: 0; z-index: 90; display: none; place-items: center;
  background: rgba(12,9,6,.9); backdrop-filter: blur(4px); padding: 2rem;
}
.mint-lightbox.on { display: grid; animation: mint-fade .3s ease; }
@keyframes mint-fade { from { opacity: 0; } to { opacity: 1; } }
.mint-lightbox .stage { max-width: min(90vw, 60rem); width: 100%; }
.mint-lightbox img { width: 100%; max-height: 82vh; object-fit: contain; border-radius: 4px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); }
.mint-lightbox .lb-cap { color: #eaddcf; font-family: var(--sans); font-size: .8rem; letter-spacing: .06em; text-align: center; margin-top: 1.1rem; }
.lb-btn {
  position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2); color: #fff; width: 48px; height: 48px; border-radius: 50%;
  font-size: 1.3rem; cursor: pointer; display: grid; place-items: center;
}
.lb-btn:hover { background: rgba(255,255,255,.18); }
.lb-prev { left: 2vw; } .lb-next { right: 2vw; }
.lb-close { position: absolute; top: 1.4rem; right: 1.6rem; background: none; border: 0; color: #fff; font-size: 2rem; cursor: pointer; line-height: 1; }

/* ---------- pages (about) ---------- */
.page .post-title { font-size: clamp(2rem,5vw,2.8rem); }
.page .post-content { font-size: 1.08rem; }
.page .post-content > p:first-of-type::first-letter { font-size: inherit; float: none; padding: 0; color: inherit; font-family: inherit; }

/* ---------- pagination ---------- */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--sans); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); padding: 2rem 0; }
.pagination a { color: var(--muted); }
.pagination a:hover { color: var(--accent); }
.extra-pagination { display: none; }

/* ---------- footer ---------- */
/* Pin the footer to the bottom of the viewport on short pages. Without this
   the footer sat wherever the content ended, floating mid-screen with empty
   paper below it. The lightbox is display:none until opened, so it must not
   count as a flex child taking up space. */
html { height: 100%; }
body { min-height: 100%; display: flex; flex-direction: column; }
body > main, body > .content { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }

.site-footer {
  border-top: 1px solid var(--rule); max-width: var(--wide); margin: 0 auto; padding: 2.2rem 1.5rem 3rem;
  font-family: var(--sans); font-size: .72rem; letter-spacing: .05em; color: var(--muted);
  display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; align-items: baseline;
}
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); }
.site-footer .rss a { color: var(--accent); }
.site-footer section { margin: 0; }

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  body { font-size: 17px; }
  nav.nav { gap: .9rem; }
  nav.nav a { font-size: .64rem; }
  .blog-title .by { display: none; }
  .mint-entry { grid-template-columns: 3.6rem 1fr; }
  .mint-entry .topic { display: none; }
  .mint-gallery { columns: 2 140px; }
  .masthead-inner { padding: .7rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Link from the lightbox caption back to the post the photograph came from. */
.mint-lightbox .lb-post { color: #eaddcf; border-bottom: 1px solid rgba(234,221,207,.45); margin-left: .6rem; }
.mint-lightbox .lb-post:hover { color: #fff; border-bottom-color: #fff; }

/* ---------- share ---------- */
.mint-share {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  padding-bottom: 1.2rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--rule);
  font-family: var(--sans); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
}
.mint-share .lbl { color: var(--muted); }
.mint-share a, .mint-share button {
  color: var(--muted); background: none; border: 0; border-bottom: 1px solid transparent;
  padding: 0; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit;
  transition: color .2s, border-color .2s;
}
.mint-share a:hover, .mint-share button:hover { color: var(--accent); border-bottom-color: var(--accent); }
.mint-share button:focus-visible, .mint-share a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mint-share .copied { color: var(--accent); }