/* ============================================================
   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);

  --serif-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --serif-body:    "Newsreader", Georgia, "Iowan Old Style", "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; }
/* Masonry columns. Tried a grid so it would read left-to-right, and it meant
   every tile sharing a height and cropping to fit, which is worse: these are
   photographs, and their proportions are the point. Columns fill downwards, so
   reading order is down column one then down column two. Living with that. */
.mint-gallery { columns: 3 220px; column-gap: 14px; padding-bottom: 4.5rem; }
/* THE `isolation` BELOW IS LOAD-BEARING AND IS A SAFARI FIX. DO NOT REMOVE IT.
   On 2026-08-21 hovering a tile in Safari turned it WHITE: the photograph
   stopped painting and this rule's own `background: var(--paper-2)` showed
   through. Chrome and Firefox were fine, which is what made it look like
   nothing was wrong.

   Cause: `:hover` applies a `transform`, which promotes the tile to its own
   compositing layer, and the tile is a child of a CSS multi-column container
   (`.mint-gallery` uses `columns: 3 220px`). WebKit mis-rasterises a layer
   promoted on the fly inside multicol, so the image is dropped and the paper
   underneath is all that is left. `isolation: isolate` gives the tile a
   stacking context up front, so the layer is not being formed for the first
   time mid-hover.

   Measured in real WebKit (playwright), 20 tiles, hover held 700ms, twice:

     without isolation:  7 of 20 tiles went white, both passes
     with isolation:     0 of 20, both passes

   The hovered colour was identical every time it failed: rgb(251,248,243),
   which IS --paper-2. That is how the cause was confirmed rather than guessed.

   `will-change: transform` and `translateZ(0)` on the img also scored 0/20 and
   were rejected: both permanently promote 40+ photographs to their own layers
   on a page that is nothing but photographs. `isolation` costs nothing to
   paint. The z-index:2 arrows, dots and counter are all inside the tile, so
   scoping them to it changes nothing; the lightbox is position:fixed and lives
   outside the gallery entirely. */
.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);
  isolation: isolate;
}
.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; }

  /* The masthead was one unbreakable row: wordmark, four nav items and the dark
     toggle, laid out with space-between and no wrapping. On a phone it simply
     ran past the right edge and the toggle was cut in half. It wraps now, and
     the nav is allowed to take a second line rather than push anything off. */
  .masthead-inner {
    padding: .7rem 1rem; flex-wrap: wrap; gap: .5rem .8rem;
    justify-content: flex-start;
  }
  .blog-title { flex: 0 0 auto; }
  .blog-title .by { display: none; }
  nav.nav {
    order: 3; flex: 1 1 100%;
    gap: 1.1rem; flex-wrap: wrap;
    /* Long enough that it will scroll rather than stack awkwardly at five or
       six items, and the scroll bar is hidden because it is not a scroll area
       anyone should have to notice. */
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  nav.nav::-webkit-scrollbar { display: none; }
  nav.nav a { font-size: .66rem; white-space: nowrap; }
  .mint-theme-toggle { margin-left: auto; flex: 0 0 auto; }

  .mint-entry { grid-template-columns: 3.6rem 1fr; }
  .mint-entry .topic { display: none; }
  .mint-gallery { columns: 2 140px; }

  /* Nothing may push the page sideways. clip, not hidden: hidden makes the
     element a scroll container, and the masthead above is position: sticky,
     which stops working inside one. clip does the same job without that. */
  body { overflow-x: clip; }
  .content { padding-left: 1.15rem; padding-right: 1.15rem; }
  .mint-index-head { flex-wrap: nowrap; gap: .6rem; }
  .mint-index-head h1, .mint-index-head h2 { min-width: 0; }
  .mint-index-head .count { flex: 0 0 auto; }
}
@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 ---------- */
/* Share: a single icon, and a copy link behind it.
   Was a row reading "Share X LinkedIn [Copy link]". LinkedIn's share URL needs
   a session, so it sent readers to their own feed or a sign-in wall rather than
   to the post. A link they can paste anywhere works everywhere and does not
   date the page. */
.mint-share { position: relative; display: flex; align-items: center; margin-top: 1.4rem; }
.mint-share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border-radius: 999px;
  background: none; border: 1px solid var(--rule); color: var(--muted);
  cursor: pointer; transition: color .15s, border-color .15s;
}
.mint-share-btn:hover { color: var(--accent); border-color: var(--accent); }
.mint-share-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mint-share-pop {
  position: absolute; left: 0; top: calc(100% + .5rem); z-index: 5;
  display: flex; gap: .4rem; align-items: center;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 6px;
  padding: .45rem; box-shadow: 0 10px 30px -12px var(--shadow);
}
.mint-share-pop[hidden] { display: none; }
.mint-share-url {
  font-family: var(--sans); font-size: .78rem; color: var(--ink);
  background: var(--paper-2); border: 0; border-radius: 4px;
  padding: .35rem .5rem; width: min(58vw, 20rem);
}
.mint-share-copy {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .04em;
  background: none; border: 1px solid var(--rule); border-radius: 4px;
  padding: .35rem .6rem; color: var(--ink); cursor: pointer; white-space: nowrap;
}
.mint-share-copy:hover { color: var(--accent); border-color: var(--accent); }
.mint-share-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mint-share-copy.copied { color: var(--accent); border-color: var(--accent); }

/* Posts / Micro heading row: label, subtitle, count on one line.
   The subtitle used to sit on its own line below, where it read as an orphaned
   sentence rather than as part of the heading. */
.mint-index-head { display: flex; align-items: baseline; justify-content: space-between; gap: .7rem; }


/* About: the portrait, shown square.
   This is the avatar from themint.micro.blog, which is still what the browser
   tab shows for anyone who visited before the migration; browsers cache
   favicons hard. The site itself now serves an M monogram. Source is only
   200x200, so it is displayed at 128 and no larger. */
.about-mark, .post-content > p:first-child > img[src$="portrait.jpg"] {
  width: 128px; height: 128px; aspect-ratio: 1; object-fit: cover;
  border-radius: 8px; margin: 0 0 1.6rem; display: block;
  box-shadow: 0 10px 30px -14px var(--shadow);
}

/* Off-screen but still read by assistive tech and microformat parsers.
   Used on the masthead p-note: the tagline reads on /about/ now, but the
   h-card should still carry it. */
.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;
}

/* Same treatment the tagline had as the home page eyebrow, so moving it to
   /about/ did not turn it into an ordinary sentence. */
/* Standfirst. It sat tight under the title and tight on top of whatever came
   next, so it read as crowding rather than as a line of its own. */
.page-tagline {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent);
  margin: .9rem 0 0; line-height: 1.6;
}

/* About: portrait and copy side by side.
   Was a float, which lost to .post-content img on specificity and left the
   picture sitting alone above the text. A flex row does not have that argument.
   .post-content img sets width:100%, so the portrait needs flex-shrink:0 and an
   explicit width that beats it. */
.about-row { display: flex; align-items: flex-start; gap: 1.8rem; margin-top: 2.2rem; }
.about-copy { flex: 1; min-width: 0; }
.about-copy > p:first-child { margin-top: 0; }
.post-content .about-portrait {
  flex: 0 0 auto; width: 132px; height: 132px; aspect-ratio: 1; object-fit: cover;
  border-radius: 6px; margin: 0;
  box-shadow: 0 12px 34px -16px var(--shadow);
}
/* On a phone a 132px float leaves a column of text three words wide. Stack it. */
@media (max-width: 640px) {
  /* 132px beside text on a 360px screen leaves a column three words wide. */
  /* Picture below the words on a phone, matching source order. */
  .about-row { flex-direction: column; gap: 1.2rem; margin-top: 1.6rem; }
  .post-content .about-portrait { width: 108px; height: 108px; }
  .mint-index-head { flex-wrap: wrap; gap: .3rem .7rem; }
  .page-tagline { letter-spacing: .14em; }
  /* Absolutely positioned from the left edge, it ran off the side of a narrow
     screen. On a phone the button usually opens the native share sheet instead
     and this never shows, but "usually" is not a layout rule. */
  .mint-share-pop { left: 0; right: 0; flex-wrap: wrap; }
  .mint-share-url { width: 100%; }
}

.page-asof {
  font-family: var(--sans); font-size: .7rem; color: var(--muted);
  margin: .35rem 0 0;
}
.about-stats {
  font-family: var(--sans); font-size: .78rem; color: var(--muted);
  border-top: 1px solid var(--rule); padding-top: 1rem; margin-top: 2rem; clear: both;
}
.mint-section-intro { color: var(--muted); margin-bottom: 1.6rem; }

/* Lightbox. The tiles have said cursor: zoom-in since the gallery was built;
   nothing zoomed until the script existed. */
.mint-lightbox {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; flex-direction: column;
  background: rgba(0,0,0,.92); padding: 3vmin;
}
.mint-lightbox.is-on { display: flex; }
.mint-lightbox img {
  max-width: 100%; max-height: 88vh; width: auto; height: auto;
  object-fit: contain; border-radius: 4px; box-shadow: none;
}
.mint-lightbox figcaption {
  color: rgba(255,255,255,.72); font-family: var(--sans); font-size: .74rem;
  margin-top: .9rem; text-align: center;
}
.mint-lightbox-close {
  position: absolute; top: 1rem; right: 1.2rem; z-index: 1;
  background: none; border: 0; color: #fff; font-size: 2rem; line-height: 1;
  cursor: pointer; padding: .2rem .6rem; opacity: .8;
}
.mint-lightbox-close:hover { opacity: 1; }
/* The arrows were hidden until hover, which on a touch screen means never.
   The swipe handler covers touch, so they can stay hover-only on a pointer. */
@media (hover: none) {
  .mint-arrow { opacity: .85; }
}

/* /things/ — the running list. Same skeleton as the post index so the site does
   not grow a second visual language for a list of dated lines. */
.mint-entries.things li { display: grid; grid-template-columns: 6.5rem 1fr; align-items: baseline; }
.mint-entries.things .ttl { font-family: var(--serif-body); }
.mint-entries.things .note {
  display: block; font-family: var(--sans); font-size: .74rem;
  color: var(--muted); margin-top: .15rem;
}
@media (max-width: 640px) {
  .mint-entries.things li { grid-template-columns: 1fr; gap: .15rem; }
}