/* Barringstone: limestone paper, slate ink, a little lichen. */

/* Registering the colours lets the browser fade the colours themselves when switching
   day/night, so background, text, borders and everything else change at exactly the same moment. */
@property --paper { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --slate { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --rule { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --stone { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --stone-ink { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --lichen { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --brand { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --blue { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --drawer { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --drawer-ink { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --drawer-rule { syntax: '<color>'; inherits: true; initial-value: transparent; }
/* Fonts are served from this site (public/fonts/), so pages make no requests to other sites.
   Both are open-source (SIL Open Font License); the licences sit next to the font files. */
@font-face { font-family: 'EB Garamond'; src: url('/fonts/eb-garamond.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url('/fonts/eb-garamond-italic.woff2') format('woff2'); font-weight: 400 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('/fonts/schibsted-grotesk.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; }

:root {
  --paper: #f5f6f3;
  --ink: #20262b;
  --slate: #5a666e;
  --rule: #d6dad5;
  --stone: #3e4a52;
  --stone-ink: #f5f6f3;
  --lichen: #56702a;
  --brand: #3e4a52;         /* your name in the header: slate, one step softer than the text */
  --blue: #284866;          /* your name in the sidebar */
  --drawer: #e3e8df;       /* the slide-in menu: a soft sage, one step off the page */
  --drawer-ink: #20262b;
  --drawer-rule: #c9d1c4;
  --sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Two typefaces only: Garamond for your name, titles and writing; a plain sans-serif for small details. */
  --garamond: 'EB Garamond', Garamond, 'Adobe Garamond Pro', 'Times New Roman', serif;
  --serif: var(--garamond);
  --photo-radius: 10px;    /* soft rounding on every photo (the headshot is rounder, 22px) */
  --head-h: 4.25rem;
  color-scheme: light;
  transition: --paper .6s ease, --ink .6s ease, --slate .6s ease, --rule .6s ease, --stone .6s ease, --stone-ink .6s ease, --lichen .6s ease, --brand .6s ease, --blue .6s ease, --drawer .6s ease, --drawer-ink .6s ease, --drawer-rule .6s ease;
}
/* Night: follows the device unless the day/night switch has been used. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #171b1e; --ink: #e4e7e2; --slate: #9aa5ac; --rule: #2e353a;
    --stone: #2c353b; --stone-ink: #e4e7e2; --lichen: #a8c26a; --brand: #b7c3c9; --blue: #9dbbd9;
    --drawer: #222a26; --drawer-ink: #e4e7e2; --drawer-rule: #34403a;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --paper: #171b1e; --ink: #e4e7e2; --slate: #9aa5ac; --rule: #2e353a;
  --stone: #2c353b; --stone-ink: #e4e7e2; --lichen: #a8c26a; --brand: #b7c3c9; --blue: #9dbbd9;
  --drawer: #222a26; --drawer-ink: #e4e7e2; --drawer-rule: #34403a;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 1rem); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.25rem/1.65 var(--serif); }
a { color: var(--lichen); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--lichen); outline-offset: 3px; border-radius: 2px; }
img { max-width: 100%; height: auto; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .5rem 1rem; z-index: 20; }
.skip:focus { left: 1rem; top: 1rem; }
.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }

/* ---------- sticky header ---------- */
.masthead {
  position: sticky; top: 0; z-index: 10;
  /* Slightly see-through: what scrolls underneath shows faintly, softened by the blur. */
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid var(--rule);
  padding-top: env(safe-area-inset-top, 0px);
  margin-bottom: 3rem;
}
.masthead-inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  min-height: var(--head-h);
}
.masthead-inner .brand { justify-self: center; }
.menu-btn { justify-self: start; margin-left: -0.6rem; }
.head-right { justify-self: end; display: flex; align-items: center; gap: .15rem; margin-right: -0.6rem; }
.head-sep { font: 300 1.5rem/1 var(--sans); color: var(--slate); opacity: .55; margin: 0 .1rem; user-select: none; }
.search-btn { color: var(--ink); }
.search-btn:hover { background: color-mix(in srgb, var(--stone) 10%, transparent); }
html:not(.js) .head-sep, html:not(.js) .search-btn { display: none; }

/* The name: Garamond capitals with a space between letters and a slightly wider gap between words. */
.brand {
  font: 500 1.625rem/1 var(--garamond);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  word-spacing: -0.08em;
  margin-right: -0.3em; /* cancels the extra space after the final letter */
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
}

.theme-btn, .menu-btn, .drawer-close, .search-btn {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  background: none; border: 0; border-radius: 50%; color: inherit; cursor: pointer;
}
.theme-btn, .menu-btn { color: var(--ink); }
.theme-btn:hover, .menu-btn:hover { background: color-mix(in srgb, var(--stone) 10%, transparent); }
html:not(.js) .theme-btn, html:not(.js) .menu-btn { display: none; }
.menu-icon { display: grid; gap: 5px; width: 22px; }
.menu-icon span { display: block; height: 2px; background: currentColor; border-radius: 1px; }
.menu-icon span:nth-child(2) { width: 70%; } /* a small asymmetry */

/* ---------- day / night icon ---------- */
/* About 2 seconds, in overlapping stages so it reads as one smooth movement:
   to night: rays draw in -> the sun swells as a shadow glides across it -> a star fades in.
   to day:   the star fades -> the shadow glides away as the moon settles -> rays grow back. */
.dn { overflow: visible; }
.dn-body, .dn-shadow, .dn-rays, .dn-star { transform-box: fill-box; transform-origin: center; }
.dn-body, .dn-shadow { transition: transform 1.5s cubic-bezier(.45, 0, .2, 1) .25s; }
.dn-rays { transition: transform 1s cubic-bezier(.3, 0, .2, 1) 1s, opacity .8s ease 1s; }
.dn-star { transition: transform .6s ease, opacity .6s ease; }
.dn-shadow { transform: translate(14px, -14px); }
.dn-star { opacity: 0; transform: scale(.4); }

:root[data-theme='dark'] .dn-body { transform: scale(1.55); }
:root[data-theme='dark'] .dn-shadow { transform: translate(5px, -4px); }
:root[data-theme='dark'] .dn-rays { transform: rotate(30deg) scale(.3); opacity: 0; transition: transform 1s cubic-bezier(.5, 0, .7, 1), opacity .8s ease .2s; }
:root[data-theme='dark'] .dn-body, :root[data-theme='dark'] .dn-shadow { transition-delay: .35s; }
:root[data-theme='dark'] .dn-star { opacity: 1; transform: none; transition: transform .7s ease 1.4s, opacity .7s ease 1.4s; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .dn-body { transform: scale(1.55); }
  :root:not([data-theme='light']) .dn-shadow { transform: translate(5px, -4px); }
  :root:not([data-theme='light']) .dn-rays { transform: rotate(30deg) scale(.3); opacity: 0; }
  :root:not([data-theme='light']) .dn-star { opacity: 1; transform: none; }
}

/* ---------- reading progress (readingProgress in site.config.mjs) ---------- */
.read-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; }
.read-progress span {
  display: block; height: 100%; background: var(--blue);
  transform: scaleX(0); transform-origin: left center; transition: transform .1s linear;
}
.read-left {
  position: fixed; top: calc(var(--head-h) + env(safe-area-inset-top, 0px) + .75rem); right: 1.25rem; z-index: 9;
  margin: 0; padding: .35rem .7rem; border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 85%, transparent); border: 1px solid var(--rule);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 500 .75rem/1 var(--sans); color: var(--slate);
  opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .3s; pointer-events: none;
}
.read-left.show { opacity: 1; transform: none; }
.post-tags .dot { margin: 0 .6rem; opacity: .5; }
.read-time { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .read-progress span, .read-left { transition: none; } }

/* ---------- search ---------- */
.search { position: fixed; inset: 0; z-index: 40; }
.search[hidden] { display: none; }
.search-scrim {
  position: absolute; inset: 0;
  background: rgb(12 16 19 / .68); /* dims the page well behind the search box */
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .2s;
}
.search-panel {
  position: relative; margin: max(10vh, calc(env(safe-area-inset-top, 0px) + 1rem)) auto 0;
  width: min(40rem, calc(100vw - 2rem)); max-height: 75vh;
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 14px;
  box-shadow: 0 24px 60px rgb(0 0 0 / .22);
  opacity: 0; transform: translateY(-8px) scale(.98); transition: opacity .2s, transform .2s;
  overflow: hidden;
}
.search.open .search-scrim { opacity: 1; }
.search.open .search-panel { opacity: 1; transform: none; }
.search-open body { overflow: hidden; }
.search-field { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem .9rem 1.1rem; color: var(--slate); }
.search-results { border-top: 1px solid var(--rule); }
.search-field input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink);
  font: 400 1.375rem/1.2 var(--serif);
}
.search-field input::placeholder { color: var(--slate); opacity: .7; }
.search-field input::-webkit-search-cancel-button { display: none; }
.search-close { flex: none; border: 1px solid var(--rule); background: none; color: var(--slate); border-radius: 6px; padding: .25rem .45rem; font: 500 .75rem/1 var(--sans); cursor: pointer; }
.search-results { overflow-y: auto; padding: .5rem; }
.search-results:empty { display: none; }
.search-heading { margin: .35rem .6rem .5rem; font: 500 .75rem/1 var(--sans); color: var(--slate); }
.search-empty { margin: 1.25rem .75rem; font: 400 .9375rem/1.5 var(--sans); color: var(--slate); }
.search-hit { display: flex; gap: .85rem; align-items: flex-start; padding: .6rem; border-radius: 10px; text-decoration: none; color: var(--ink); }
.search-hit.active, .search-hit:hover { background: color-mix(in srgb, var(--stone) 9%, transparent); }
.search-thumb { flex: none; width: 5.5rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--photo-radius) - 3px); }
.search-hit-body { display: grid; gap: .2rem; min-width: 0; }
.search-hit-title { font: 600 1.125rem/1.25 var(--serif); }
.search-hit-date { font: 400 .75rem/1 var(--sans); color: var(--slate); }
.search-hit-text { font-size: .9375rem; line-height: 1.45; color: var(--slate); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search mark { background: color-mix(in srgb, var(--lichen) 28%, transparent); color: inherit; border-radius: 2px; padding: 0 .05em; }
@media (prefers-reduced-motion: reduce) { .search-scrim, .search-panel { transition: none; } }
@media (max-width: 30rem) { .search-thumb { width: 4.25rem; } }

/* ---------- slide-in menu ---------- */
.scrim {
  position: fixed; inset: 0; z-index: 30;
  background: rgb(20 26 30 / .35);
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility 0s .3s;
}
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 31;
  width: min(20rem, 86vw);
  display: flex; flex-direction: column;
  background: var(--drawer); color: var(--drawer-ink);
  border-radius: 0 20px 20px 0;
  box-shadow: 12px 0 40px rgb(0 0 0 / .12);
  padding: calc(env(safe-area-inset-top, 0px) + .75rem) 1.5rem calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
  transform: translateX(-105%); visibility: hidden;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), visibility 0s .35s;
  overflow-y: auto;
}
.menu-open .scrim { opacity: 1; visibility: visible; transition: opacity .3s; }
.menu-open .drawer { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.4, 0, .2, 1); }
.menu-open body { overflow: hidden; }
.drawer-head { display: flex; align-items: center; justify-content: flex-end; min-height: 3.5rem; margin: 0 -.6rem 1rem 0; }
.drawer-title { font: 500 .8125rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.drawer-close:hover { background: color-mix(in srgb, var(--drawer-ink) 8%, transparent); }
.drawer-links { display: grid; }
.drawer-links a {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 0;
  border-bottom: 1px solid var(--drawer-rule);
  font: italic 400 1.5rem/1.1 var(--garamond);
  color: var(--drawer-ink); text-decoration: none;
}
.drawer-links a:first-child { border-top: 1px solid var(--drawer-rule); }
.drawer-links a::after { content: '→'; font: normal 400 1rem/1 var(--sans); opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s; }
.drawer-links a:hover::after, .drawer-links a:focus-visible::after { opacity: .7; transform: none; }
.drawer-links a[aria-current='page'] { color: var(--lichen); }
.drawer-links a[aria-current='page']::after { content: '•'; opacity: 1; transform: none; }
/* Without JavaScript the menu is simply shown below the header. */
html:not(.js) .drawer { position: static; transform: none; visibility: visible; width: auto; border-radius: 0; box-shadow: none; }
html:not(.js) .drawer-head, html:not(.js) .scrim { display: none; }
@media (prefers-reduced-motion: reduce) {
  .drawer, .scrim, .dn *, body { transition: none !important; }
}

/* ---------- layout ---------- */
.grid { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: 4.5rem; align-items: start; }
main { max-width: 42rem; min-width: 0; }

/* ---------- sidebar ---------- */
.sidebar { position: sticky; top: calc(var(--head-h) + 2rem); font-size: 1rem; color: var(--slate); }
.avatar { display: block; width: 100%; max-width: 12rem; aspect-ratio: 1; border-radius: 22px; object-fit: cover; }
.avatar-mono { display: grid; place-items: center; background: var(--stone); color: var(--stone-ink); font: 500 3.25rem/1 var(--garamond); letter-spacing: .08em; }
.greeting { font: 500 1.5rem/1.2 var(--serif); color: var(--blue); margin: 1.25rem 0 .5rem; }
.intro { margin: 0 0 1rem; }
.social { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.social a {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid var(--rule); color: var(--slate);
  transition: color .2s, border-color .2s, background-color .2s;
}
.social a:hover, .social a:focus-visible { color: var(--paper); background: var(--blue); border-color: var(--blue); }
.social svg { width: 1.15rem; height: 1.15rem; }
.social .icon-file {
  width: 1.15rem; height: 1.15rem; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.side-block { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.side-thumb { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--photo-radius); margin-bottom: .5rem; }
.side-post:hover .side-thumb { filter: brightness(1.05); }
.side-h { font: 500 .875rem/1 var(--sans); color: var(--slate); margin: 0 0 .9rem; }
.side-post { display: grid; gap: .35rem; text-decoration: none; }
.side-date { font: 400 .8125rem/1 var(--sans); color: var(--slate); }
.side-title { font: 600 1.125rem/1.3 var(--serif); color: var(--ink); }
.side-excerpt { font-size: .9375rem; line-height: 1.5; color: var(--slate); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.side-post:hover .side-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }

/* ---------- date stamp ---------- */
.stamp {
  flex: none; display: flex; flex-direction: column; align-items: center;
  width: 4rem; padding: .6rem 0 .55rem;
  background: var(--stone); color: var(--stone-ink);
  border-radius: 4px 4px 16px 4px;
  text-decoration: none; font-family: var(--sans); line-height: 1;
}
.stamp-m { font-size: .8125rem; font-weight: 500; opacity: .8; }
.stamp-d { font: 600 1.75rem/1.1 var(--serif); margin: .15rem 0; }
.stamp-y { font-size: .6875rem; opacity: .6; }
a.stamp:hover { background: var(--lichen); color: var(--paper); }

/* ---------- post cards (home, categories, tags, related) ---------- */
/* The home page grows with the window (header and footer included), up to a very wide cap,
   so big and high-resolution screens get more and bigger cards instead of empty margins. */
.wide .wrap { max-width: 150rem; padding-left: clamp(1.5rem, 4vw, 5rem); padding-right: clamp(1.5rem, 4vw, 5rem); }
.wide .card-title { font-size: clamp(1.3rem, 1rem + .45vw, 1.75rem); }
.wide .card-date { font-size: clamp(.8125rem, .7rem + .15vw, .9375rem); }
main.list { max-width: none; }
.list-heading { font: 600 2rem/1.2 var(--serif); margin: 0 0 2rem; letter-spacing: -.01em; }
.cards {
  --col-gap: clamp(1.25rem, 1.6vw, 2.25rem);
  display: grid;
  gap: calc(var(--col-gap) * 1.35) var(--col-gap);
  /* As many columns as fit at 17rem or wider, never more than 5:
     roughly 1 on phones, 2-3 on tablets and small laptops, 4 on most laptops, 5 on large monitors. */
  grid-template-columns: repeat(auto-fill, minmax(max(17rem, calc((100% - 4 * var(--col-gap)) / 5)), 1fr));
  margin-bottom: 3rem;
}
.card { display: grid; align-content: start; gap: .5rem; min-width: 0; }
.card-link { display: grid; gap: .45rem; text-decoration: none; color: inherit; }
.card-media {
  position: relative; display: block;
  aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--photo-radius);
  background: var(--stone);
  margin-bottom: .35rem;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.card-link:hover .card-media img { transform: scale(1.03); }
.card-blank {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--stone-ink); opacity: .85;
  font: italic 500 1.375rem/1 var(--garamond);
}
.card-link:hover .card-blank { opacity: 1; }
.card-date { font: 400 .8125rem/1 var(--sans); color: var(--slate); }
.card-title { font: 600 1.375rem/1.2 var(--serif); letter-spacing: -.01em; margin: 0; color: var(--ink); }
.card-link:hover .card-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.card-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .15rem 0 0; font: 400 .75rem/1 var(--sans); }
.card-tags a { padding: .3rem .55rem; border: 1px solid var(--rule); border-radius: 999px; color: var(--slate); text-decoration: none; }
.card-tags a:hover { color: var(--ink); border-color: var(--slate); }
/* New posts: a small label on the picture and a lichen-green date. */
.card-new {
  position: absolute; top: .65rem; left: .65rem;
  padding: .3rem .6rem; border-radius: 999px;
  background: var(--lichen); color: var(--paper);
  font: 600 .75rem/1 var(--sans); letter-spacing: .03em;
}
.card.is-new .card-date { color: var(--lichen); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .card-media img { transition: none; } }

.meta { font: 400 .875rem/1.5 var(--sans); color: var(--slate); margin: 0 0 .6rem; }
.meta a { color: inherit; }
.empty { color: var(--slate); }
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font: 500 .9375rem/1 var(--sans); }
.pager a:last-child { justify-self: end; }
.pager-count { color: var(--slate); font-weight: 400; }

/* ---------- single post ---------- */
.post-head { display: flex; gap: 1.5rem; align-items: flex-start; margin-bottom: 2rem; }
.post-title { font: 600 clamp(2rem, 4.5vw, 2.75rem)/1.12 var(--serif); letter-spacing: -.02em; margin: 0 0 .6rem; }
/* The hero: full page width, wide and tall, cropped to fit. */
.post-top { margin-bottom: 3rem; }
.post-hero {
  display: block; width: 100%;
  aspect-ratio: 16 / 9; max-height: 78vh; object-fit: cover;
  border-radius: var(--photo-radius);
}
/* Photos inside the writing */
.post-figure { margin: 2rem 0; }
.post-figure img, .prose > p > img { display: block; width: 100%; border-radius: var(--photo-radius); }
.post-figure figcaption { margin-top: .6rem; font: 400 .875rem/1.5 var(--sans); color: var(--slate); }
.prose > :first-child { margin-top: 0; }
.prose h2 { font: 600 1.5rem/1.3 var(--serif); margin: 2.5rem 0 .75rem; }
.prose h3 { font: 600 1.25rem/1.3 var(--serif); margin: 2rem 0 .5rem; }
/* Night mode: sub-headings take the blue of your name so they stand out from the text,
   the writing is a touch softer, and text is rendered a little thinner (light-on-dark
   text otherwise looks heavier than the same text by day). Day mode is unchanged. */
:root[data-theme='dark'] .prose :is(h2, h3) { color: var(--blue); font-weight: 500; }
:root[data-theme='dark'] .prose { color: color-mix(in srgb, var(--ink) 92%, var(--paper)); }
:root[data-theme='dark'] body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .prose :is(h2, h3) { color: var(--blue); font-weight: 500; }
  :root:not([data-theme='light']) .prose { color: color-mix(in srgb, var(--ink) 92%, var(--paper)); }
  :root:not([data-theme='light']) body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
}
.prose p, .prose ul, .prose ol { margin: 0 0 1.25rem; }
.prose blockquote { margin: 1.75rem 0; padding-left: 1.25rem; border-left: 3px solid var(--rule); font-style: italic; color: var(--slate); }
.prose img { border-radius: var(--photo-radius); margin: .5rem 0; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
/* The sign-off at the end of each post: light, grey, italic, set a little apart. */
.signoff { margin: 2.25rem 0 0; font: italic 400 1.125rem/1.5 var(--serif); color: var(--slate); letter-spacing: .01em; }
.prose code { font-size: .875em; background: color-mix(in srgb, var(--stone) 12%, transparent); padding: .1em .35em; border-radius: 3px; }
.prose pre { overflow-x: auto; padding: 1rem 1.25rem; background: color-mix(in srgb, var(--stone) 10%, transparent); border-radius: 4px; font-size: .875rem; line-height: 1.55; }
.prose pre code { background: none; padding: 0; }
.post-tags { margin: .1rem 0 0; font: 400 .9375rem/1.6 var(--sans); color: var(--slate); }
.post-tags a { color: var(--slate); text-decoration: none; opacity: .85; white-space: nowrap; }
.post-tags a:hover { color: var(--ink); opacity: 1; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.post-tags .sep { margin: 0 .6rem; opacity: .4; }

/* ---------- previous / next ---------- */
/* With a mouse: while the pointer is over the post, round arrows fade in on its left and
   right edges. They ride along near the bottom of the screen as you scroll the post. */
.post { position: relative; }
.post-arrows {
  position: sticky; bottom: 18vh; z-index: 5;
  height: 0; margin-top: 0;
  pointer-events: none;
}
.edge-link {
  position: absolute; bottom: 0;
  display: block; text-decoration: none; color: var(--ink);
  opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.edge-left { left: 0; transform: translateX(calc(-50% - 6px)); }
.edge-right { right: 0; transform: translateX(calc(50% + 6px)); }
.post:hover .edge-link, .edge-link:focus-visible { opacity: 1; pointer-events: auto; }
.post:hover .edge-left, .edge-left:focus-visible { transform: translateX(-50%); }
.post:hover .edge-right, .edge-right:focus-visible { transform: translateX(50%); }
.edge-arrow {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--stone); color: var(--stone-ink);
  border: 3px solid var(--paper);
  box-shadow: 0 6px 20px rgb(0 0 0 / .15);
}
.edge-link:hover .edge-arrow { background: var(--lichen); color: var(--paper); }
.edge-tip {
  position: absolute; bottom: calc(100% + .6rem); width: 14rem;
  display: grid; gap: .25rem; padding: .55rem .55rem .7rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--photo-radius);
  box-shadow: 0 8px 24px rgb(0 0 0 / .1);
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.edge-link:hover .edge-tip, .edge-link:focus-visible .edge-tip { opacity: 1; }
.edge-left .edge-tip { left: 50%; transform: translateX(-1.5rem); }
.edge-right .edge-tip { right: 50%; transform: translateX(1.5rem); text-align: right; }
.edge-thumb { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: calc(var(--photo-radius) - 3px); margin-bottom: .45rem; }
.edge-label { font: 500 .75rem/1 var(--sans); color: var(--slate); padding: 0 .3rem; }
.edge-title { font: 500 1.0625rem/1.25 var(--serif); padding: 0 .3rem; }
/* Phones and tablets (no mouse): a plain Previous / Next row under the post instead. */
.post-steps { display: none; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.step { display: grid; gap: .3rem; align-content: start; text-decoration: none; }
.step-right { text-align: right; }
.step-thumb { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--photo-radius); margin-bottom: .4rem; }
.step-label { font: 500 .8125rem/1 var(--sans); color: var(--slate); }
.step-title { font: 500 1.125rem/1.3 var(--serif); color: var(--ink); }
.step:hover .step-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
@media (hover: none), (pointer: coarse) {
  .post-arrows { display: none; }
  .post-steps { display: grid; }
}
@media (prefers-reduced-motion: reduce) { .edge-link, .edge-tip { transition: none; } }

/* ---------- archive ---------- */
.years { display: flex; flex-wrap: wrap; gap: .5rem; margin: -1rem 0 2rem; font: 500 .9375rem/1 var(--sans); }
.years a { padding: .45rem .8rem; border: 1px solid var(--rule); border-radius: 999px; color: var(--slate); text-decoration: none; }
.years a:hover { color: var(--ink); border-color: var(--slate); }
.years a[aria-current='page'] { background: var(--stone); border-color: var(--stone); color: var(--stone-ink); }
.year-card .card-media img { filter: brightness(.72); }
.year-num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 500 3rem/1 var(--garamond); letter-spacing: .12em; color: #fff;
  text-shadow: 0 2px 16px rgb(0 0 0 / .35);
}
.year-card .card-date { font-size: .875rem; }

/* ---------- stand-alone pages (About, 404): one centred column ---------- */
.solo main.solo-main { max-width: 40rem; margin: 0 auto; }
.page-photo { display: block; width: 100%; max-height: 80vh; object-fit: cover; border-radius: var(--photo-radius); margin: 0 0 2.25rem; }
.page-photo-blank { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--stone); color: var(--stone-ink); font: 500 4rem/1 var(--garamond); letter-spacing: .08em; }
.solo-next { margin: 3rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.solo-next a { display: grid; gap: .3rem; text-decoration: none; font: 500 1.25rem/1.3 var(--serif); color: var(--ink); }
.solo-next a span { font: 500 .8125rem/1 var(--sans); color: var(--slate); }
.solo-next a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }

/* ---------- photo galleries (carousel) ---------- */
.carousel { position: relative; margin: 2.25rem 0; }
.carousel-track {
  display: flex; gap: .9rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 0 7% .9rem; /* the side padding is what lets the neighbours peek in */
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--slate) 45%, transparent) transparent;
}
.carousel-track::-webkit-scrollbar { height: 6px; }
.carousel-track::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--slate) 45%, transparent); border-radius: 3px; }
.carousel-track:focus-visible { outline: 2px solid var(--lichen); outline-offset: 4px; border-radius: var(--photo-radius); }
.carousel-slide { flex: 0 0 86%; margin: 0; scroll-snap-align: center; opacity: .45; transition: opacity .35s ease; }
.carousel-slide.is-active { opacity: 1; }
.carousel-slide img {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin: 0;
  border-radius: var(--photo-radius); cursor: zoom-in;
}
.carousel-slide:not(.is-active) img { cursor: pointer; }
.carousel-slide figcaption { margin-top: .6rem; font: 400 .875rem/1.45 var(--sans); color: var(--slate); }
.carousel-btn {
  position: absolute; top: var(--btn-top, 38%); transform: translateY(-50%);
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 0; background: color-mix(in srgb, var(--paper) 88%, transparent); color: var(--ink);
  box-shadow: 0 4px 16px rgb(0 0 0 / .18); cursor: pointer; transition: opacity .2s, background-color .2s;
}
.carousel-btn:hover { background: var(--paper); }
.carousel-btn:disabled { opacity: 0; pointer-events: none; }
.carousel-prev { left: .4rem; }
.carousel-next { right: .4rem; }
.post:has(.carousel:hover) .edge-link { opacity: 0; pointer-events: none; } /* keep the post arrows out of the gallery's way */
.carousel-count { margin: .15rem 0 0; text-align: center; font: 500 .75rem/1 var(--sans); color: var(--slate); }
/* Small previews of every photo in the gallery: faded, except the one being shown. */
.carousel-thumbs { display: flex; justify-content: safe center; gap: .4rem; margin: .6rem 0 0; padding: 3px; overflow-x: auto; scrollbar-width: none; }
.carousel-thumbs::-webkit-scrollbar { display: none; }
.carousel-thumb {
  flex: none; width: 2.75rem; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 4px; overflow: hidden;
  background: none; cursor: pointer; opacity: .35; filter: saturate(.5); transition: opacity .25s, filter .25s, box-shadow .25s;
}
.carousel-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.carousel-thumb:hover { opacity: .7; }
.carousel-thumb.is-active { opacity: 1; filter: none; box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 3px var(--slate); }
@media (prefers-reduced-motion: reduce) { .carousel-thumb { transition: none; } }
@media (max-width: 30rem) {
  .carousel-track { padding: 0 6% .8rem; gap: .6rem; }
  .carousel-slide { flex-basis: 88%; }
  .carousel-btn { width: 2.25rem; height: 2.25rem; }
}
@media (prefers-reduced-motion: reduce) { .carousel-track { scroll-behavior: auto; } .carousel-slide { transition: none; } }
.lightbox { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgb(10 13 15 / .92); opacity: 0; transition: opacity .2s; }
.lightbox[hidden] { display: none; }
.lightbox.open { opacity: 1; }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: .75rem; max-width: 92vw; }
.lightbox img { max-width: 92vw; max-height: 80vh; object-fit: contain; border-radius: var(--photo-radius); }
.lightbox figcaption { font: 400 .9375rem/1.4 var(--sans); color: #d9ddd8; text-align: center; }
/* Videos in posts: full width like photos, same rounded corners. */
.post-video { display: block; width: 100%; max-height: 80vh; border-radius: var(--photo-radius); background: #000; }
/* Photo captions (the text in quotes after a photo): Garamond italic, like the sign-off. */
.post-figure figcaption, .carousel-slide figcaption, .lightbox figcaption { font-family: var(--serif); font-style: italic; font-size: 1.0625rem; }
.lightbox-count { font: 500 .75rem/1 var(--sans); color: #9aa5ac; }
.lightbox button { position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 0; background: rgb(255 255 255 / .1); color: #f5f6f3; cursor: pointer; }
.lightbox button:hover { background: rgb(255 255 255 / .2); }
.lightbox-close { top: calc(env(safe-area-inset-top, 0px) + 1rem); right: 1rem; }
.lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .lightbox { transition: none; } }

/* ---------- related posts ---------- */
.related { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.related-h { font: 600 1.375rem/1.2 var(--serif); margin: 0 0 1.25rem; }
.cards-related { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); margin-bottom: 0; }
.cards-related .card-title { font-size: 1.0625rem; }

/* ---------- footer ---------- */
.footer { background: var(--stone); color: var(--stone-ink); margin-top: 5rem; padding: 3rem 0 calc(2.5rem + env(safe-area-inset-bottom, 0px)); font: 400 .9375rem/1.5 var(--sans); }
.footer a { color: inherit; }
.footer-inner { display: grid; gap: 1.5rem; }
.footer-brand { color: var(--stone-ink); font-size: 1.375rem; }
.footer-inner p { margin: .5rem 0 0; opacity: .75; }
.footer-copy { font-size: .8125rem; }

/* ---------- small screens ---------- */
@media (max-width: 52rem) {
  :root { --head-h: 3.75rem; }
  .masthead { margin-bottom: 2rem; }
  .grid { grid-template-columns: 1fr; gap: 3rem; }
  .sidebar { position: static; border-top: 1px solid var(--rule); padding-top: 2.5rem; }
  .avatar { max-width: 8rem; }
}
@media (max-width: 30rem) {
  .brand { font-size: 1.25rem; letter-spacing: .22em; word-spacing: -.06em; margin-right: -.22em; }
  body { font-size: 1.1875rem; }
  .post-head { gap: 1rem; }
  .post-hero { aspect-ratio: 4 / 3; }
  .post-top { margin-bottom: 2rem; }
  .stamp { width: 3.25rem; }
  .stamp-d { font-size: 1.4rem; }
  .cards { grid-template-columns: 1fr; }
  .cards-related { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
}

@media (prefers-reduced-motion: reduce) { :root { transition: none; } }