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