:root {
  --paper: #f4ece1;
  --ink: #1b1b1b;
  --muted: #6f6a60;
  --rule: #ddd0bc;
  --accent: #00736e;    /* teal */
  --accent-2: #c62463;  /* magenta */
  --accent-3: #f2b134;  /* mustard */
  --stone-1: #009a93;
  --stone-2: #f2e3cc;
  --stone-3: #f2b134;
  --stone-4: #e0407f;
  --stone-shine: #ffffffd0;
  --menu-bg: #8d0fb4;
  --menu-ink: #f9f5f5;
  --measure: 48rem;
  --display: "Futura", "Futura PT", "Avenir Next", "Century Gothic", "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* dark palette: follows the system unless the header toggle has pinned a theme.
   The two blocks below hold the same values — keep them in sync. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #18181b;
    --ink: #f1eadd;
    --muted: #9a938a;
    --rule: #35332f;
    --accent: #45cabe;
    --accent-2: #ff77aa;
    --accent-3: #ffc857;
    --stone-1: #0f7f79;
    --stone-2: #4b4640;
    --stone-3: #c9922b;
    --stone-4: #c14273;
    --stone-shine: #ffffff55;
  --menu-bg: #c77dff;
  --menu-ink: #18181b;
  }
}

:root[data-theme="dark"] {
  --paper: #18181b;
  --ink: #f1eadd;
  --muted: #9a938a;
  --rule: #35332f;
  --accent: #45cabe;
  --accent-2: #ff77aa;
  --accent-3: #ffc857;
  --stone-1: #0f7f79;
  --stone-2: #4b4640;
  --stone-3: #c9922b;
  --stone-4: #c14273;
  --stone-shine: #ffffff55;
  --menu-bg: #c77dff;
  --menu-ink: #18181b;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding-inline: 1.25rem;
  background: var(--paper);
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Charter, Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent-2); color: #fff; }

.site-header, main, .site-footer {
  max-width: var(--measure);
  margin-inline: auto;
}

/* header + dropdown */

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: 2.5rem 1.1rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 3.5rem;
}

.site-name {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.logo { width: 2.9em; height: 2.9em; flex: none; margin-block: -1.15em; overflow: visible; }  /* fallen stones may land just outside */
.logo .st { stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.logo .s1 { fill: var(--stone-1); }
.logo .s2, .logo .s5 { fill: var(--stone-2); }
.logo .s3, .logo .s6 { fill: var(--stone-4); }
.logo .s4 { fill: var(--stone-3); }
.logo .hl { fill: none; stroke: var(--stone-shine); stroke-width: 1.1; stroke-linecap: round; }

/* The cairn sways like a spine: each stone leans a little further, a moment after the one below (.j2-.j4).
   At the right-hand lean the top pebble slides off, tips over the edge and tumbles to the ground; at the
   left-hand lean the stone under it goes the other way. Both fade, then drop back on top. The two top
   stones sit outside the bending groups: their .ride wrapper follows the bend while they're on the stack
   and lets go once they fall, so they lie still on the ground. All of this was generated by a small
   physics simulation (slide, pivot over the edge, gravity, bounce); don't hand-edit the long keyframe lists. */
.cairn, .j2, .j3, .j4, .ride { transform-box: view-box; }
.ride { transform-origin: 0 0; animation: 12s linear infinite; }
.r5 { animation-name: ride-s5; }
.r6 { animation-name: ride-s6; }
.logo .fall { transform-box: fill-box; transform-origin: center; animation: 12s linear infinite; }
.logo .s6 { animation-name: fall-s6; }
.logo .s5 { animation-name: fall-s5; }

.cairn { transform-origin: 24.0px 46.0px; animation: sway-1 6s ease-in-out infinite; }
@keyframes sway-1 { 0%, 100% { transform: rotate(-2.0deg); } 50% { transform: rotate(2.0deg); } }
.j2 { transform-origin: 22.5px 37.2px; animation: sway-2 6s ease-in-out -5.84s infinite; }
@keyframes sway-2 { 0%, 100% { transform: rotate(-0.75deg); } 50% { transform: rotate(0.75deg); } }
.j3 { transform-origin: 25.0px 30.0px; animation: sway-3 6s ease-in-out -5.68s infinite; }
@keyframes sway-3 { 0%, 100% { transform: rotate(-0.75deg); } 50% { transform: rotate(0.75deg); } }
.j4 { transform-origin: 23.5px 23.3px; animation: sway-4 6s ease-in-out -5.52s infinite; }
@keyframes sway-4 { 0%, 100% { transform: rotate(-0.75deg); } 50% { transform: rotate(0.75deg); } }

@keyframes fall-s6 {
  0%, 18.33% { transform: none; opacity: 1; }
  18.47% { transform: translate(0.00px, 0.00px) rotate(0.0deg); }
  18.75% { transform: translate(0.02px, 0.00px) rotate(0.0deg); }
  19.03% { transform: translate(0.06px, 0.01px) rotate(0.0deg); }
  19.31% { transform: translate(0.11px, 0.02px) rotate(0.0deg); }
  19.58% { transform: translate(0.19px, 0.04px) rotate(0.0deg); }
  19.86% { transform: translate(0.28px, 0.05px) rotate(0.0deg); }
  20.14% { transform: translate(0.39px, 0.07px) rotate(0.0deg); }
  20.42% { transform: translate(0.52px, 0.10px) rotate(0.0deg); }
  20.69% { transform: translate(0.67px, 0.13px) rotate(0.0deg); }
  20.97% { transform: translate(0.83px, 0.16px) rotate(0.0deg); }
  21.25% { transform: translate(1.02px, 0.19px) rotate(0.0deg); }
  21.53% { transform: translate(1.22px, 0.23px) rotate(0.0deg); }
  21.81% { transform: translate(1.44px, 0.27px) rotate(0.0deg); }
  22.08% { transform: translate(1.68px, 0.32px) rotate(0.0deg); }
  22.36% { transform: translate(1.94px, 0.37px) rotate(0.0deg); }
  22.64% { transform: translate(2.21px, 0.42px) rotate(0.0deg); }
  22.92% { transform: translate(2.51px, 0.48px) rotate(0.0deg); }
  23.19% { transform: translate(2.82px, 0.54px) rotate(0.0deg); }
  23.47% { transform: translate(3.16px, 0.60px) rotate(0.0deg); }
  23.75% { transform: translate(3.51px, 0.67px) rotate(0.0deg); }
  24.03% { transform: translate(3.87px, 0.74px) rotate(0.0deg); }
  24.31% { transform: translate(4.26px, 0.81px) rotate(0.0deg); }
  24.58% { transform: translate(4.67px, 0.89px) rotate(0.0deg); }
  24.86% { transform: translate(5.09px, 0.97px) rotate(0.0deg); }
  25.14% { transform: translate(5.31px, 1.01px) rotate(0.1deg); }
  25.42% { transform: translate(5.34px, 1.02px) rotate(1.0deg); }
  25.69% { transform: translate(5.40px, 1.03px) rotate(2.8deg); }
  25.97% { transform: translate(5.49px, 1.06px) rotate(5.4deg); }
  26.25% { transform: translate(5.60px, 1.10px) rotate(9.0deg); }
  26.53% { transform: translate(5.74px, 1.16px) rotate(13.4deg); }
  26.81% { transform: translate(5.90px, 1.24px) rotate(18.8deg); }
  27.08% { transform: translate(6.08px, 1.36px) rotate(25.0deg); }
  27.36% { transform: translate(6.36px, 1.70px) rotate(31.4deg); }
  27.64% { transform: translate(6.64px, 2.33px) rotate(37.9deg); }
  27.92% { transform: translate(6.92px, 3.25px) rotate(44.3deg); }
  28.19% { transform: translate(7.19px, 4.46px) rotate(50.8deg); }
  28.47% { transform: translate(7.47px, 5.96px) rotate(57.2deg); }
  28.75% { transform: translate(7.75px, 7.75px) rotate(63.7deg); }
  29.03% { transform: translate(8.03px, 9.83px) rotate(70.1deg); }
  29.31% { transform: translate(8.43px, 9.83px) rotate(76.1deg); }
  29.58% { transform: translate(8.83px, 9.94px) rotate(80.4deg); }
  29.86% { transform: translate(9.23px, 9.94px) rotate(84.0deg); }
  30.14% { transform: translate(9.63px, 10.04px) rotate(86.9deg); }
  30.42% { transform: translate(10.03px, 10.16px) rotate(89.3deg); }
  30.69% { transform: translate(10.43px, 10.28px) rotate(91.4deg); }
  30.97% { transform: translate(10.83px, 10.40px) rotate(93.2deg); }
  31.25% { transform: translate(11.23px, 10.71px) rotate(94.6deg); }
  31.53% { transform: translate(11.63px, 10.85px) rotate(96.0deg); }
  31.81% { transform: translate(12.03px, 10.97px) rotate(97.2deg); }
  32.08% { transform: translate(12.43px, 11.17px) rotate(98.3deg); }
  32.36% { transform: translate(12.83px, 11.52px) rotate(99.2deg); }
  32.64% { transform: translate(13.23px, 11.80px) rotate(100.1deg); }
  32.92% { transform: translate(13.63px, 12.20px) rotate(100.9deg); }
  33.19% { transform: translate(14.03px, 12.51px) rotate(101.7deg); }
  33.47% { transform: translate(14.43px, 12.91px) rotate(102.3deg); }
  33.75% { transform: translate(14.83px, 13.61px) rotate(103.0deg); }
  34.03% { transform: translate(15.23px, 14.59px) rotate(103.7deg); }
  34.31% { transform: translate(15.63px, 15.86px) rotate(104.3deg); }
  34.58% { transform: translate(16.03px, 17.42px) rotate(105.0deg); }
  34.86% { transform: translate(16.43px, 19.27px) rotate(105.6deg); }
  35.14% { transform: translate(16.83px, 21.41px) rotate(106.3deg); }
  35.42% { transform: translate(17.23px, 23.84px) rotate(107.0deg); }
  35.69% { transform: translate(17.63px, 26.56px) rotate(107.6deg); }
  35.97% { transform: translate(18.03px, 29.56px) rotate(108.3deg); }
  36.25% { transform: translate(18.43px, 30.99px) rotate(116.2deg); }
  36.53% { transform: translate(18.79px, 30.89px) rotate(129.4deg); }
  36.81% { transform: translate(19.09px, 30.87px) rotate(140.5deg); }
  37.08% { transform: translate(19.33px, 30.93px) rotate(149.6deg); }
  37.36% { transform: translate(19.53px, 31.09px) rotate(156.9deg); }
  37.64% { transform: translate(19.68px, 31.33px) rotate(162.5deg); }
  37.92% { transform: translate(19.80px, 31.60px) rotate(166.8deg); }
  38.19% { transform: translate(19.88px, 31.85px) rotate(169.8deg); }
  38.47% { transform: translate(19.93px, 31.91px) rotate(171.9deg); }
  38.75% { transform: translate(19.97px, 31.90px) rotate(173.1deg); }
  39.03% { transform: translate(19.98px, 31.90px) rotate(173.7deg); }
  39.31% { transform: translate(19.99px, 31.90px) rotate(174.0deg); }
  39.58% { transform: translate(19.99px, 31.90px) rotate(174.0deg); }
  39.58% { transform: translate(19.99px, 31.90px) rotate(174.0deg); }
  77.50% { transform: translate(19.99px, 31.90px) rotate(174.0deg); opacity: 1; }
  80.83% { transform: translate(19.99px, 31.90px) rotate(174.0deg); opacity: 0; }
  89.17% { transform: translateY(-8px); opacity: 0; animation-timing-function: ease-in; }
  91.25% { opacity: 1; }
  92.92% { transform: none; animation-timing-function: ease-out; }
  94.00% { transform: translateY(-0.5px); animation-timing-function: ease-in; }
  95.00%, 100% { transform: none; opacity: 1; }
}

@keyframes fall-s5 {
  0%, 42.50% { transform: none; opacity: 1; }
  42.64% { transform: translate(-0.00px, 0.00px) rotate(0.0deg); }
  42.92% { transform: translate(-0.03px, 0.00px) rotate(0.0deg); }
  43.19% { transform: translate(-0.09px, 0.01px) rotate(0.0deg); }
  43.47% { transform: translate(-0.18px, 0.02px) rotate(0.0deg); }
  43.75% { transform: translate(-0.29px, 0.03px) rotate(0.0deg); }
  44.03% { transform: translate(-0.44px, 0.05px) rotate(0.0deg); }
  44.31% { transform: translate(-0.61px, 0.07px) rotate(0.0deg); }
  44.58% { transform: translate(-0.81px, 0.09px) rotate(0.0deg); }
  44.86% { transform: translate(-1.05px, 0.11px) rotate(0.0deg); }
  45.14% { transform: translate(-1.31px, 0.14px) rotate(0.0deg); }
  45.42% { transform: translate(-1.59px, 0.18px) rotate(0.0deg); }
  45.69% { transform: translate(-1.91px, 0.21px) rotate(0.0deg); }
  45.97% { transform: translate(-2.26px, 0.25px) rotate(0.0deg); }
  46.25% { transform: translate(-2.64px, 0.29px) rotate(0.0deg); }
  46.53% { transform: translate(-3.04px, 0.33px) rotate(0.0deg); }
  46.81% { transform: translate(-3.48px, 0.38px) rotate(0.0deg); }
  47.08% { transform: translate(-3.94px, 0.43px) rotate(0.0deg); }
  47.36% { transform: translate(-4.43px, 0.49px) rotate(0.0deg); }
  47.64% { transform: translate(-4.95px, 0.54px) rotate(0.0deg); }
  47.92% { transform: translate(-5.50px, 0.60px) rotate(0.0deg); }
  48.19% { transform: translate(-6.08px, 0.67px) rotate(0.0deg); }
  48.47% { transform: translate(-6.69px, 0.73px) rotate(0.0deg); }
  48.75% { transform: translate(-7.32px, 0.80px) rotate(0.0deg); }
  49.03% { transform: translate(-7.99px, 0.88px) rotate(0.0deg); }
  49.31% { transform: translate(-8.34px, 0.92px) rotate(-0.1deg); }
  49.58% { transform: translate(-8.36px, 0.92px) rotate(-1.0deg); }
  49.86% { transform: translate(-8.42px, 0.94px) rotate(-2.7deg); }
  50.14% { transform: translate(-8.50px, 0.96px) rotate(-5.2deg); }
  50.42% { transform: translate(-8.61px, 1.00px) rotate(-8.6deg); }
  50.69% { transform: translate(-8.74px, 1.05px) rotate(-12.9deg); }
  50.97% { transform: translate(-8.89px, 1.13px) rotate(-18.0deg); }
  51.25% { transform: translate(-9.05px, 1.24px) rotate(-24.0deg); }
  51.53% { transform: translate(-9.49px, 1.57px) rotate(-29.7deg); }
  51.81% { transform: translate(-9.93px, 2.19px) rotate(-35.3deg); }
  52.08% { transform: translate(-10.36px, 3.10px) rotate(-41.0deg); }
  52.36% { transform: translate(-10.80px, 4.30px) rotate(-46.7deg); }
  52.64% { transform: translate(-11.22px, 5.01px) rotate(-52.3deg); }
  52.92% { transform: translate(-11.62px, 5.62px) rotate(-57.2deg); }
  53.19% { transform: translate(-12.02px, 6.03px) rotate(-62.0deg); }
  53.47% { transform: translate(-12.42px, 6.49px) rotate(-66.1deg); }
  53.75% { transform: translate(-12.82px, 7.24px) rotate(-70.2deg); }
  54.03% { transform: translate(-13.22px, 8.27px) rotate(-74.2deg); }
  54.31% { transform: translate(-13.62px, 9.60px) rotate(-78.3deg); }
  54.58% { transform: translate(-14.02px, 11.21px) rotate(-82.4deg); }
  54.86% { transform: translate(-14.42px, 13.12px) rotate(-86.5deg); }
  55.14% { transform: translate(-14.82px, 15.31px) rotate(-90.6deg); }
  55.42% { transform: translate(-15.22px, 17.79px) rotate(-94.7deg); }
  55.69% { transform: translate(-15.62px, 19.14px) rotate(-98.8deg); }
  55.97% { transform: translate(-16.02px, 19.32px) rotate(-102.0deg); }
  56.25% { transform: translate(-16.42px, 19.89px) rotate(-105.0deg); }
  56.53% { transform: translate(-16.82px, 20.76px) rotate(-107.9deg); }
  56.81% { transform: translate(-17.22px, 21.91px) rotate(-110.9deg); }
  57.08% { transform: translate(-17.62px, 23.35px) rotate(-113.9deg); }
  57.36% { transform: translate(-18.02px, 24.37px) rotate(-116.8deg); }
  57.64% { transform: translate(-18.41px, 24.49px) rotate(-129.9deg); }
  57.92% { transform: translate(-18.73px, 24.83px) rotate(-140.9deg); }
  58.19% { transform: translate(-19.00px, 25.34px) rotate(-150.0deg); }
  58.47% { transform: translate(-19.22px, 25.94px) rotate(-157.4deg); }
  58.75% { transform: translate(-19.40px, 26.57px) rotate(-163.2deg); }
  59.03% { transform: translate(-19.53px, 27.13px) rotate(-167.7deg); }
  59.31% { transform: translate(-19.63px, 27.60px) rotate(-171.0deg); }
  59.58% { transform: translate(-19.69px, 27.89px) rotate(-173.2deg); }
  59.86% { transform: translate(-19.74px, 27.94px) rotate(-174.7deg); }
  60.14% { transform: translate(-19.76px, 27.96px) rotate(-175.5deg); }
  60.42% { transform: translate(-19.77px, 27.97px) rotate(-175.9deg); }
  60.69% { transform: translate(-19.78px, 27.97px) rotate(-176.0deg); }
  60.83% { transform: translate(-19.78px, 27.97px) rotate(-176.0deg); }
  75.00% { transform: translate(-19.78px, 27.97px) rotate(-176.0deg); opacity: 1; }
  78.33% { transform: translate(-19.78px, 27.97px) rotate(-176.0deg); opacity: 0; }
  81.67% { transform: translateY(-8px); opacity: 0; animation-timing-function: ease-in; }
  83.75% { opacity: 1; }
  85.42% { transform: none; animation-timing-function: ease-out; }
  86.50% { transform: translateY(-0.5px); animation-timing-function: ease-in; }
  87.50%, 100% { transform: none; opacity: 1; }
}

@keyframes ride-s6 {
  0.00% { transform: translate(-2.95px, 2.32px) rotate(-5.27deg); }
  0.83% { transform: translate(-2.99px, 2.39px) rotate(-5.41deg); }
  1.67% { transform: translate(-3.00px, 2.42px) rotate(-5.50deg); }
  2.50% { transform: translate(-2.99px, 2.44px) rotate(-5.53deg); }
  3.33% { transform: translate(-2.95px, 2.43px) rotate(-5.51deg); }
  4.17% { transform: translate(-2.88px, 2.40px) rotate(-5.44deg); }
  5.00% { transform: translate(-2.78px, 2.34px) rotate(-5.31deg); }
  5.83% { transform: translate(-2.65px, 2.26px) rotate(-5.13deg); }
  6.67% { transform: translate(-2.50px, 2.15px) rotate(-4.90deg); }
  7.50% { transform: translate(-2.31px, 2.02px) rotate(-4.61deg); }
  8.33% { transform: translate(-2.10px, 1.86px) rotate(-4.27deg); }
  9.17% { transform: translate(-1.86px, 1.69px) rotate(-3.88deg); }
  10.00% { transform: translate(-1.59px, 1.49px) rotate(-3.44deg); }
  10.83% { transform: translate(-1.31px, 1.28px) rotate(-2.95deg); }
  11.67% { transform: translate(-1.00px, 1.05px) rotate(-2.43deg); }
  12.50% { transform: translate(-0.67px, 0.81px) rotate(-1.87deg); }
  13.33% { transform: translate(-0.33px, 0.56px) rotate(-1.28deg); }
  14.17% { transform: translate(0.01px, 0.30px) rotate(-0.68deg); }
  15.00% { transform: translate(0.36px, 0.04px) rotate(-0.06deg); }
  15.83% { transform: translate(0.70px, -0.21px) rotate(0.55deg); }
  16.67% { transform: translate(1.04px, -0.46px) rotate(1.16deg); }
  17.50% { transform: translate(1.36px, -0.70px) rotate(1.74deg); }
  18.33% { transform: translate(1.67px, -0.93px) rotate(2.31deg); }
  19.17% { transform: translate(1.95px, -1.14px) rotate(2.84deg); }
  20.00% { transform: translate(2.21px, -1.34px) rotate(3.33deg); }
  20.83% { transform: translate(2.44px, -1.51px) rotate(3.78deg); }
  21.67% { transform: translate(2.65px, -1.67px) rotate(4.18deg); }
  22.50% { transform: translate(2.82px, -1.81px) rotate(4.53deg); }
  23.33% { transform: translate(2.96px, -1.92px) rotate(4.83deg); }
  24.17% { transform: translate(3.08px, -2.02px) rotate(5.08deg); }
  25.00% { transform: translate(3.16px, -2.10px) rotate(5.27deg); }
  25.83% { transform: translate(3.21px, -2.15px) rotate(5.41deg); }
  26.67% { transform: translate(3.23px, -2.19px) rotate(5.50deg); }
  27.50% { transform: translate(3.16px, -2.16px) rotate(5.43deg); }
  28.33% { transform: translate(2.56px, -1.78px) rotate(4.46deg); }
  29.17% { transform: translate(1.64px, -1.15px) rotate(2.88deg); }
  30.00% { transform: translate(0.72px, -0.51px) rotate(1.28deg); }
  30.83% { transform: translate(0.11px, -0.08px) rotate(0.20deg); }
  31.67% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  32.50% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  33.33% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  34.17% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  35.00% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  35.83% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  36.67% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  37.50% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  38.33% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  39.17% { transform: translate(-0.00px, -0.00px) rotate(0.00deg); }
  40.00% { transform: translate(-0.00px, -0.00px) rotate(0.00deg); }
  40.83% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  41.67% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  42.50% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  43.33% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  44.17% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  45.00% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  45.83% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  46.67% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  47.50% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  48.33% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  49.17% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  50.00% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  50.83% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  51.67% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  52.50% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  53.33% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  54.17% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  55.00% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  55.83% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  56.67% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  57.50% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  58.33% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  59.17% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  60.00% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  60.83% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  61.67% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  62.50% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  63.33% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  64.17% { transform: translate(0.00px, 0.00px) rotate(-0.00deg); }
  65.00% { transform: translate(0.00px, 0.00px) rotate(-0.00deg); }
  65.83% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  66.67% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  67.50% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  68.33% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  69.17% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  70.00% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  70.83% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  71.67% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  72.50% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  73.33% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  74.17% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  75.00% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  75.83% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  76.67% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  77.50% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  78.33% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  79.17% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  80.00% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  80.83% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  81.67% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  82.50% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  83.33% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  84.17% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  85.00% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  85.83% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  86.67% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  87.50% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  88.33% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  89.17% { transform: translate(-0.00px, -0.00px) rotate(0.00deg); }
  90.00% { transform: translate(-0.04px, -0.00px) rotate(0.01deg); }
  90.83% { transform: translate(-0.25px, 0.08px) rotate(-0.19deg); }
  91.67% { transform: translate(-0.67px, 0.31px) rotate(-0.75deg); }
  92.50% { transform: translate(-1.20px, 0.66px) rotate(-1.56deg); }
  93.33% { transform: translate(-1.63px, 0.99px) rotate(-2.31deg); }
  94.17% { transform: translate(-1.89px, 1.22px) rotate(-2.84deg); }
  95.00% { transform: translate(-2.13px, 1.44px) rotate(-3.33deg); }
  95.83% { transform: translate(-2.34px, 1.64px) rotate(-3.78deg); }
  96.67% { transform: translate(-2.52px, 1.83px) rotate(-4.18deg); }
  97.50% { transform: translate(-2.67px, 1.99px) rotate(-4.53deg); }
  98.33% { transform: translate(-2.79px, 2.12px) rotate(-4.83deg); }
  99.17% { transform: translate(-2.89px, 2.23px) rotate(-5.08deg); }
  100.00% { transform: translate(-2.95px, 2.32px) rotate(-5.27deg); }
}

@keyframes ride-s5 {
  0.00% { transform: translate(-2.84px, 2.08px) rotate(-4.74deg); }
  0.83% { transform: translate(-2.87px, 2.12px) rotate(-4.83deg); }
  1.67% { transform: translate(-2.88px, 2.14px) rotate(-4.87deg); }
  2.50% { transform: translate(-2.85px, 2.13px) rotate(-4.87deg); }
  3.33% { transform: translate(-2.80px, 2.11px) rotate(-4.82deg); }
  4.17% { transform: translate(-2.73px, 2.07px) rotate(-4.72deg); }
  5.00% { transform: translate(-2.63px, 2.00px) rotate(-4.58deg); }
  5.83% { transform: translate(-2.50px, 1.91px) rotate(-4.39deg); }
  6.67% { transform: translate(-2.34px, 1.81px) rotate(-4.15deg); }
  7.50% { transform: translate(-2.16px, 1.68px) rotate(-3.87deg); }
  8.33% { transform: translate(-1.94px, 1.53px) rotate(-3.54deg); }
  9.17% { transform: translate(-1.70px, 1.36px) rotate(-3.16deg); }
  10.00% { transform: translate(-1.44px, 1.18px) rotate(-2.74deg); }
  10.83% { transform: translate(-1.16px, 0.98px) rotate(-2.29deg); }
  11.67% { transform: translate(-0.85px, 0.77px) rotate(-1.80deg); }
  12.50% { transform: translate(-0.54px, 0.55px) rotate(-1.29deg); }
  13.33% { transform: translate(-0.21px, 0.32px) rotate(-0.75deg); }
  14.17% { transform: translate(0.12px, 0.09px) rotate(-0.21deg); }
  15.00% { transform: translate(0.46px, -0.13px) rotate(0.34deg); }
  15.83% { transform: translate(0.79px, -0.36px) rotate(0.88deg); }
  16.67% { transform: translate(1.10px, -0.57px) rotate(1.41deg); }
  17.50% { transform: translate(1.41px, -0.77px) rotate(1.91deg); }
  18.33% { transform: translate(1.69px, -0.96px) rotate(2.39deg); }
  19.17% { transform: translate(1.95px, -1.14px) rotate(2.84deg); }
  20.00% { transform: translate(2.19px, -1.30px) rotate(3.25deg); }
  20.83% { transform: translate(2.40px, -1.44px) rotate(3.61deg); }
  21.67% { transform: translate(2.58px, -1.56px) rotate(3.93deg); }
  22.50% { transform: translate(2.73px, -1.67px) rotate(4.20deg); }
  23.33% { transform: translate(2.85px, -1.76px) rotate(4.43deg); }
  24.17% { transform: translate(2.94px, -1.82px) rotate(4.61deg); }
  25.00% { transform: translate(3.01px, -1.88px) rotate(4.74deg); }
  25.83% { transform: translate(3.04px, -1.91px) rotate(4.83deg); }
  26.67% { transform: translate(3.05px, -1.93px) rotate(4.87deg); }
  27.50% { transform: translate(3.03px, -1.93px) rotate(4.87deg); }
  28.33% { transform: translate(2.97px, -1.91px) rotate(4.82deg); }
  29.17% { transform: translate(2.89px, -1.88px) rotate(4.72deg); }
  30.00% { transform: translate(2.78px, -1.82px) rotate(4.58deg); }
  30.83% { transform: translate(2.64px, -1.75px) rotate(4.39deg); }
  31.67% { transform: translate(2.47px, -1.66px) rotate(4.15deg); }
  32.50% { transform: translate(2.26px, -1.56px) rotate(3.87deg); }
  33.33% { transform: translate(2.03px, -1.43px) rotate(3.54deg); }
  34.17% { transform: translate(1.78px, -1.28px) rotate(3.16deg); }
  35.00% { transform: translate(1.50px, -1.12px) rotate(2.74deg); }
  35.83% { transform: translate(1.20px, -0.94px) rotate(2.29deg); }
  36.67% { transform: translate(0.88px, -0.75px) rotate(1.80deg); }
  37.50% { transform: translate(0.55px, -0.54px) rotate(1.29deg); }
  38.33% { transform: translate(0.21px, -0.32px) rotate(0.75deg); }
  39.17% { transform: translate(-0.12px, -0.09px) rotate(0.21deg); }
  40.00% { transform: translate(-0.46px, 0.14px) rotate(-0.34deg); }
  40.83% { transform: translate(-0.78px, 0.37px) rotate(-0.88deg); }
  41.67% { transform: translate(-1.09px, 0.60px) rotate(-1.41deg); }
  42.50% { transform: translate(-1.38px, 0.82px) rotate(-1.91deg); }
  43.33% { transform: translate(-1.65px, 1.03px) rotate(-2.39deg); }
  44.17% { transform: translate(-1.89px, 1.22px) rotate(-2.84deg); }
  45.00% { transform: translate(-2.11px, 1.40px) rotate(-3.25deg); }
  45.83% { transform: translate(-2.30px, 1.57px) rotate(-3.61deg); }
  46.67% { transform: translate(-2.46px, 1.71px) rotate(-3.93deg); }
  47.50% { transform: translate(-2.60px, 1.83px) rotate(-4.20deg); }
  48.33% { transform: translate(-2.71px, 1.94px) rotate(-4.43deg); }
  49.17% { transform: translate(-2.79px, 2.02px) rotate(-4.61deg); }
  50.00% { transform: translate(-2.84px, 2.08px) rotate(-4.74deg); }
  50.83% { transform: translate(-2.87px, 2.12px) rotate(-4.83deg); }
  51.67% { transform: translate(-2.82px, 2.10px) rotate(-4.78deg); }
  52.50% { transform: translate(-2.31px, 1.73px) rotate(-3.94deg); }
  53.33% { transform: translate(-1.49px, 1.12px) rotate(-2.55deg); }
  54.17% { transform: translate(-0.66px, 0.50px) rotate(-1.14deg); }
  55.00% { transform: translate(-0.10px, 0.08px) rotate(-0.18deg); }
  55.83% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  56.67% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  57.50% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  58.33% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  59.17% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  60.00% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  60.83% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  61.67% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  62.50% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  63.33% { transform: translate(-0.00px, 0.00px) rotate(-0.00deg); }
  64.17% { transform: translate(0.00px, 0.00px) rotate(-0.00deg); }
  65.00% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  65.83% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  66.67% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  67.50% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  68.33% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  69.17% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  70.00% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  70.83% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  71.67% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  72.50% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  73.33% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  74.17% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  75.00% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  75.83% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  76.67% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  77.50% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  78.33% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  79.17% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  80.00% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  80.83% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  81.67% { transform: translate(0.00px, -0.00px) rotate(0.00deg); }
  82.50% { transform: translate(0.24px, -0.16px) rotate(0.40deg); }
  83.33% { transform: translate(0.72px, -0.50px) rotate(1.24deg); }
  84.17% { transform: translate(1.15px, -0.83px) rotate(2.05deg); }
  85.00% { transform: translate(1.34px, -1.00px) rotate(2.46deg); }
  85.83% { transform: translate(1.20px, -0.94px) rotate(2.29deg); }
  86.67% { transform: translate(0.88px, -0.75px) rotate(1.80deg); }
  87.50% { transform: translate(0.55px, -0.54px) rotate(1.29deg); }
  88.33% { transform: translate(0.21px, -0.32px) rotate(0.75deg); }
  89.17% { transform: translate(-0.12px, -0.09px) rotate(0.21deg); }
  90.00% { transform: translate(-0.46px, 0.14px) rotate(-0.34deg); }
  90.83% { transform: translate(-0.78px, 0.37px) rotate(-0.88deg); }
  91.67% { transform: translate(-1.09px, 0.60px) rotate(-1.41deg); }
  92.50% { transform: translate(-1.38px, 0.82px) rotate(-1.91deg); }
  93.33% { transform: translate(-1.65px, 1.03px) rotate(-2.39deg); }
  94.17% { transform: translate(-1.89px, 1.22px) rotate(-2.84deg); }
  95.00% { transform: translate(-2.11px, 1.40px) rotate(-3.25deg); }
  95.83% { transform: translate(-2.30px, 1.57px) rotate(-3.61deg); }
  96.67% { transform: translate(-2.46px, 1.71px) rotate(-3.93deg); }
  97.50% { transform: translate(-2.60px, 1.83px) rotate(-4.20deg); }
  98.33% { transform: translate(-2.71px, 1.94px) rotate(-4.43deg); }
  99.17% { transform: translate(-2.79px, 2.02px) rotate(-4.61deg); }
  100.00% { transform: translate(-2.84px, 2.08px) rotate(-4.74deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cairn, .j2, .j3, .j4, .ride, .logo .fall { animation: none !important; }
}

.controls { display: flex; align-items: center; gap: 0.6rem; }

.theme {
  display: none;  /* without JS there is nothing to toggle, so it stays hidden */
  padding: 0.2rem 0.7rem;
  border: 2px solid var(--ink);
  background: none;
  color: var(--ink);
  font-family: var(--display);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.js .theme { display: inline-block; }
.theme:hover { box-shadow: 3px 3px 0 var(--ink); }

/* the button names the theme it switches to */
.theme::after { content: "dark"; }
:root[data-theme="dark"] .theme::after { content: "light"; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme::after { content: "light"; }
}

.menu { position: relative; font-family: var(--display); font-size: 0.8rem; }

.menu summary {
  list-style: none;
  cursor: pointer;
  padding: 0.2rem 0.7rem;
  border: 2px solid var(--ink);
  background: var(--menu-bg);
  color: var(--menu-ink);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  user-select: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after {
  content: "+";
  display: inline-block;
  margin-left: 0.35em;
  transition: transform 0.2s ease;
}
.menu[open] summary::after { transform: rotate(45deg); }
.menu summary:hover { box-shadow: 3px 3px 0 var(--ink); }

.menu nav {
  position: absolute;
  right: 0;
  top: calc(100% + 0.6rem);
  min-width: 9rem;
  padding-block: 0.5rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  z-index: 10;
  animation: settle 0.18s ease-out;
}
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu nav a {
  display: block;
  padding: 0.25rem 1.1rem;
  color: var(--ink);
  text-decoration: none;
}
.menu nav a:hover { color: var(--accent-2); }
.menu nav a[aria-current] { color: var(--muted); }

@keyframes settle {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* text */

h1, h2, h3 { font-family: var(--display); font-weight: normal; line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: 1.9rem; margin: 0 0 1.5rem; }
h2 { font-size: 1.35rem; margin: 2.5rem 0 0.75rem; }
h3 { font-size: 1.1rem; font-style: italic; margin: 2rem 0 0.5rem; }

a { color: var(--accent); text-decoration-color: currentColor; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-2); }

p, ul, ol, blockquote, pre, table { margin-block: 0 1.2rem; }

blockquote {
  margin-inline: 0;
  padding-left: 1.1rem;
  border-left: 4px solid var(--accent-2);
  color: var(--muted);
  font-style: italic;
}

hr {
  width: 6rem;
  height: 6px;
  border: 0;
  margin: 2.5rem auto;
  background: linear-gradient(90deg,
    var(--accent) 0 33.3%, var(--accent-3) 33.3% 66.6%, var(--accent-2) 66.6%);
}

img { max-width: 100%; height: auto; display: block; }

code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.85em; }
pre { overflow-x: auto; padding: 1rem; background: var(--rule); font-size: 0.9rem; }

table { border-collapse: collapse; display: block; overflow-x: auto; }
th, td { padding: 0.3rem 0.8rem; border-bottom: 1px solid var(--rule); text-align: left; }

.katex { font-size: 1.05em; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding-block: 0.25rem; }

time { color: var(--muted); font-family: var(--display); font-size: 0.8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* entries */

.entry header { margin-bottom: 1.5rem; }
.entry header h1, .entry header h2 { margin-bottom: 0.2rem; }
.entry header h2 { margin-top: 0; }
.entry header h2 a { text-decoration: none; }
.entry + .entry { margin-top: 3.5rem; padding-top: 3rem; border-top: 1px solid var(--rule); }

.intro { color: var(--muted); margin-bottom: 2rem; }

.entries { list-style: none; padding: 0; }
.entries li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  column-gap: 1.5rem;
  padding-block: 0.4rem;
}
.entries a { color: #7292d1; text-decoration: none; }
.entries a:hover { color: var(--accent); }

.back { margin-top: 3.5rem; font-family: var(--display); font-size: 0.85rem; }
.back a { color: var(--muted); text-decoration: none; }
.back a:hover { color: var(--accent); }

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

/* landing page */

.home .entry header { margin-bottom: 3rem; }
.home .entry header h1 { font-size: 1.75rem; margin-bottom: 0; }

.home-nav ul { list-style: none; padding: 0; margin: 0; }
.home-nav li { display: flex; align-items: baseline; gap: 0.7rem; padding-block: 0.35rem; }
.home-nav a { color: var(--ink); font-family: var(--display); font-size: 1.3rem; text-decoration: none; }
.home-nav a:hover { color: var(--accent-2); }

/* a small memphis shape per link, cycling through the palette */
.home-nav li::before { font-size: 0.7rem; line-height: 1; }
.home-nav li:nth-child(4n + 1)::before { content: "\25C6"; color: var(--accent); }
.home-nav li:nth-child(4n + 2)::before { content: "\25CF"; color: var(--accent-2); }
.home-nav li:nth-child(4n + 3)::before { content: "\25B2"; color: var(--accent-3); }
.home-nav li:nth-child(4n)::before { content: "\25A0"; color: var(--ink); }

/* photos: allowed to be wider than the text column */

.wide {
  --wide: min(72rem, 100vw - 2.5rem);
  width: var(--wide);
  margin-inline: calc((100% - var(--wide)) / 2);
}

/* justified rows: each tile grows in proportion to its aspect ratio, so every row lines up */
.grid {
  --row: 15rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
  margin-block: 1rem 2rem;
}
.grid::after { content: ""; flex-grow: 1000000; } /* keeps the last row from stretching */
.tile {
  flex: var(--ratio) 1 calc(var(--ratio) * var(--row));
  aspect-ratio: var(--ratio);
  min-width: 0;
  overflow: hidden;
  cursor: zoom-in;
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease, transform 0.8s ease;
}
.tile:hover img { transform: scale(1.015); }

.albums {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: 2rem 1.25rem;
  margin-block: 1rem 3rem;
}
.album { color: var(--ink); text-decoration: none; }
.album .cover { display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 2px solid var(--ink); }
.album img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease, transform 0.8s ease;
}
.album:hover img { transform: scale(1.02); }
.album-title { display: block; padding-top: 0.6rem; font-family: var(--display); font-size: 0.9rem; letter-spacing: 0.03em; }

/* photos fade in over their average colour once loaded (only when JS can reveal them) */
.js .tile img, .js .album img, .lightbox img { opacity: 0; }
.js .tile img.loaded, .js .album img.loaded, .lightbox img.loaded { opacity: 1; }

@media (max-width: 40rem) {
  .grid { --row: 7.5rem; gap: 0.35rem; }
}

.lightbox {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
}
.lightbox::backdrop { background: var(--paper); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; animation: settle 0.2s ease-out; }
html:has(.lightbox[open]) { overflow: hidden; }
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.lightbox img {
  width: auto;
  height: auto;
  max-width: calc(100vw - 8rem);
  max-height: calc(100dvh - 7rem);
  object-fit: contain;
  transition: opacity 0.3s ease;
}
.lightbox figcaption {
  min-height: 1.5em;
  padding-inline: 1rem;
  color: var(--muted);
  font-size: 0.9rem;
  font-style: italic;
  text-align: center;
}
.lightbox button {
  position: absolute;
  padding: 1rem 1.25rem;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox button:hover { color: var(--ink); }
.lb-close { top: 0.5rem; right: 0.5rem; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); }
.lb-prev { left: 0.5rem; }
.lb-next { right: 0.5rem; }
.lightbox.single .lb-prev, .lightbox.single .lb-next { display: none; }

@media (max-width: 40rem) {
  .lightbox img { max-width: 100vw; max-height: calc(100dvh - 9rem); }
  .lb-prev, .lb-next { top: auto; bottom: 0.75rem; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tile img, .album img, .lightbox img { transition: none; }
  .tile:hover img, .album:hover img { transform: none; }
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 1.5rem;
  margin-top: 6rem;
  padding-block: 1.1rem 2.5rem;
  border-top: 2px solid var(--ink);
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.site-footer time { color: inherit; font-size: inherit; }

/* only ever seen on the local preview: published builds leave drafts out */
.draft-tag {
  font-family: var(--display);
  font-size: 0.65rem;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  vertical-align: middle;
  padding: 0.1rem 0.45rem;
  border: 1.5px dashed var(--accent-2);
  color: var(--accent-2);
}

/* logs: type labels, filter, one random intro line */

.entry-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.9rem; }

.type-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  font-family: var(--display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
/* the same memphis shapes as the home menu, one per type */
.type-tag::before, .type-filter button:not([data-type=""])::before { font-size: 0.85em; line-height: 1; }
.t0::before { content: "\25C6"; color: var(--accent); }
.t1::before { content: "\25CF"; color: var(--accent-2); }
.t2::before { content: "\25B2"; color: var(--accent-3); }
.t3::before { content: "\25A0"; color: var(--ink); }

.type-filter { display: none; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 3rem; }
.js .type-filter { display: flex; }  /* filtering needs JS; without it everything is listed */
.type-filter button {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  padding: 0.2rem 0.7rem;
  border: 2px solid var(--ink);
  background: none;
  color: var(--ink);
  font-family: var(--display);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.type-filter button:hover { box-shadow: 3px 3px 0 var(--ink); }
.type-filter button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.type-filter button[aria-pressed="true"].t3::before { color: var(--paper); }

/* hidden entries leave no gap or divider behind */
.entry[hidden] { display: none; }
.entry:not([hidden]) ~ .entry:not([hidden]) { margin-top: 3.5rem; padding-top: 3rem; border-top: 1px solid var(--rule); }
.type-filter ~ .entry:not([hidden]) { border-top: 0; margin-top: 0; padding-top: 0; }
.type-filter ~ .entry:not([hidden]) ~ .entry:not([hidden]) { margin-top: 3.5rem; padding-top: 3rem; border-top: 1px solid var(--rule); }

.random-intro { font-style: italic; }
.random-intro p:not(:first-child) { display: none; }  /* without JS: just the first line */
.random-intro.picked p { display: block; }