@import url('https://fonts.googleapis.com/css2?family=IM+Fell+DW+Pica:ital@0;1&display=swap');

:root {
  /* Type */
  --font-serif: 'IM Fell DW Pica', Georgia, serif;

  --text-ui: 10px;
  --text-meta: 12px;
  --text-small: 16px;
  --text-body: 18px;
  --text-index-number: 32px;
  --text-headline: clamp(31px, 3.05vw, 45px);
  --text-display: clamp(57px, 7vw, 92px);

  --leading-display: 0.84;
  --leading-tight: 1;
  --leading-body: 1.45;

  --measure-article: 36ch;
  --measure-about: 42ch;

  /* Six-pixel rhythm. Optical/decorative values are allowed to break it. */
  --space-1: 6px;
  --space-2: 12px;
  --space-3: 18px;
  --space-4: 24px;
  --space-5: 30px;
  --space-6: 36px;
  --space-7: 42px;
  --space-8: 48px;
  --space-9: 54px;
  --space-10: 60px;
  --space-12: 72px;

  /* Layout */
  --rail: 98px;
  --about: min(500px, calc(100vw - var(--rail)));

  /* Colour */
  --paper: #070706;
  --ink: #181712;
  --text: #eee8d9;
  --text-about: #eae3d3;
  --text-soft: rgba(238, 232, 217, 0.84);
  --red: #cf291d;
  --gold: #e0c26e;
  --muted-gold: #9a8753;
  --rule: #625d4f;
  --border: #b6ae9d;
  --border-dark: #726956;

  font-family: var(--font-serif);
  color: #e8e2d4;
  background: #e8e2d4;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html,
body,
#root,
.hw-app {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
}

button,
a {
  font: inherit;
}

/* Two depths of dust float across the full interface. */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 19;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse at 82% 78%, rgba(189, 99, 23, 0.085), transparent 31%),
    radial-gradient(ellipse at 18% 28%, rgba(224, 176, 81, 0.045), transparent 35%),
    radial-gradient(ellipse at 52% 108%, rgba(124, 53, 13, 0.07), transparent 40%);
  animation: room-glow 8.5s ease-in-out infinite alternate;
  transition: filter 0.75s ease;
}

.candle-out .atmosphere {
  filter: brightness(0.28) saturate(0.55);
}

.atmosphere::before,
.atmosphere::after {
  content: '';
  position: absolute;
  inset: -25%;
  background-repeat: repeat;
  will-change: opacity, transform;
}

.atmosphere::before {
  opacity: 0.18;
  background-image:
    radial-gradient(circle at 17% 29%, rgba(255, 239, 184, 0.96) 0 0.48px, transparent 0.9px),
    radial-gradient(circle at 71% 63%, rgba(231, 188, 92, 0.84) 0 0.55px, transparent 1px),
    radial-gradient(circle at 39% 82%, rgba(246, 226, 171, 0.78) 0 0.42px, transparent 0.82px),
    radial-gradient(circle at 88% 44%, rgba(255, 241, 196, 0.72) 0 0.38px, transparent 0.76px),
    radial-gradient(circle at 54% 13%, rgba(216, 154, 59, 0.72) 0 0.5px, transparent 0.94px);
  background-size:
    109px 131px,
    157px 193px,
    223px 181px,
    283px 241px,
    347px 307px;
  filter: blur(0.15px);
  animation:
    dust-tile-far 17s linear infinite,
    dust-flicker 7.2s ease-in-out infinite;
}

.atmosphere::after {
  opacity: 0.1;
  background-image:
    radial-gradient(circle at 23% 68%, rgba(255, 236, 174, 0.86) 0 0.72px, transparent 1.3px),
    radial-gradient(circle at 84% 21%, rgba(226, 174, 72, 0.76) 0 0.62px, transparent 1.16px),
    radial-gradient(circle at 61% 46%, rgba(248, 224, 164, 0.66) 0 0.82px, transparent 1.48px),
    radial-gradient(circle at 8% 17%, rgba(255, 242, 196, 0.64) 0 0.56px, transparent 1.08px);
  background-size:
    271px 313px,
    379px 337px,
    487px 419px,
    593px 467px;
  filter: blur(0.35px);
  animation:
    dust-tile-near 12s linear infinite,
    dust-flicker-near 5.8s ease-in-out infinite;
}

@keyframes dust-tile-far {
  from {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  }

  to {
    background-position:
      109px -131px,
      -157px -193px,
      223px -181px,
      -283px -241px,
      347px -307px;
  }
}

@keyframes dust-flicker {
  0%, 100% { opacity: 0.17; }
  24% { opacity: 0.28; }
  53% { opacity: 0.21; }
  78% { opacity: 0.35; }
}

@keyframes dust-tile-near {
  from {
    background-position: 0 0, 0 0, 0 0, 0 0;
  }

  to {
    background-position:
      -271px -313px,
      379px -337px,
      -487px -419px,
      593px -467px;
  }
}

@keyframes dust-flicker-near {
  0%, 100% { opacity: 0.09; }
  31% { opacity: 0.19; }
  57% { opacity: 0.12; }
  83% { opacity: 0.24; }
}

@keyframes room-glow {
  from {
    opacity: 0.76;
  }

  to {
    opacity: 1;
  }
}

/* Fine soot-and-paper grain removes the remaining perfectly digital surface. */
.surface-texture {
  position: fixed;
  inset: 0;
  z-index: 18;
  opacity: 0.085;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: soft-light;
}

/* The rail and articles move as one stage when About opens. */
.site-stage {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--paper);
  transition: transform 0.62s cubic-bezier(0.65, 0, 0.18, 1);
  will-change: transform;
}

/* A viewport-level candle mouse: content passes beneath him. */
.shelf-easter-egg {
  position: fixed;
  right: clamp(18px, 3vw, 25px);
  bottom: 0;
  z-index: 20;
  width: 250px;
  opacity: 1;
  pointer-events: none;
  transform: none;
  transition:
    opacity 0.45s ease,
    transform 0.55s cubic-bezier(0.2, 0.75, 0.25, 1);
}

/* A silhouette-shaped button catches clicks on the illustrated mole without
   turning the transparent rectangle around the PNG into a dead zone. */
.mole-trigger {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  clip-path: polygon(
    0 38%,
    17% 26%,
    25% 12%,
    42% 3%,
    70% 2%,
    88% 11%,
    96% 20%,
    89% 31%,
    95% 47%,
    89% 73%,
    78% 86%,
    61% 89%,
    48% 84%,
    54% 94%,
    30% 97%,
    10% 91%,
    3% 78%,
    13% 63%,
    10% 50%
  );
}

.mole-trigger:focus-visible {
  outline: none;
}

.mole-trigger:focus-visible ~ img {
  filter: drop-shadow(0 0 4px rgba(224, 194, 110, 0.65));
}

.shelf-easter-egg img,
.about-rat img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  transform: scaleX(-1);
}

.shelf-easter-egg img {
  transition: filter 0.65s ease;
}

.shelf-easter-egg.candle-is-out img {
  filter: brightness(0.58) saturate(0.42) sepia(0.08);
}

.candle-aura {
  position: absolute;
  z-index: 2;
  width: 18%;
  aspect-ratio: 0.72;
  border-radius: 52% 48% 58% 42%;
  background: radial-gradient(
    ellipse at 50% 65%,
    rgba(255, 241, 168, 0.94) 0 5%,
    rgba(224, 157, 45, 0.58) 24%,
    rgba(190, 76, 18, 0.2) 51%,
    transparent 73%
  );
  filter: blur(4px);
  mix-blend-mode: screen;
  transform-origin: 50% 80%;
  animation: candle-flicker 2.35s ease-in-out infinite alternate;
  transition: opacity 0.45s ease;
}

/* A transparent light lens warms the page beneath the animated flame. */
.candle-aura::before {
  content: '';
  position: absolute;
  inset: -165%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(230, 177, 75, 0.055) 0 24%,
    rgba(190, 104, 32, 0.025) 45%,
    transparent 72%
  );
  -webkit-backdrop-filter: sepia(0.72) saturate(1.55) brightness(1.2);
  backdrop-filter: sepia(0.72) saturate(1.55) brightness(1.2);
  -webkit-mask-image: radial-gradient(circle, #000 0 30%, transparent 72%);
  mask-image: radial-gradient(circle, #000 0 30%, transparent 72%);
}

/* A much wider gloam: barely visible, but enough to let the candle occupy
   the surrounding dark rather than ending at the edge of its bright aura. */
.candle-aura::after {
  content: '';
  position: absolute;
  inset: -680% -820%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 58%,
    rgba(245, 209, 119, 0.026) 0 10%,
    rgba(214, 151, 58, 0.018) 27%,
    rgba(156, 91, 31, 0.009) 49%,
    transparent 76%
  );
  filter: blur(30px);
  mix-blend-mode: screen;
  transform-origin: 50% 58%;
  animation: candle-gloam 6.8s ease-in-out infinite alternate;
}

.shelf-easter-egg .candle-aura {
  top: 14%;
  left: 3.5%;
  width: 20%;
}

/* Warm sparks now originate only from the mole's candle. */
.candle-embers {
  position: absolute;
  top: 14%;
  left: 3.5%;
  z-index: 3;
  width: 20%;
  aspect-ratio: 0.72;
  overflow: visible;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.shelf-easter-egg.candle-is-out .candle-aura {
  opacity: 0 !important;
  animation-play-state: paused;
}

.shelf-easter-egg.candle-is-out .candle-embers {
  opacity: 0;
}

.candle-embers i {
  --x1: -5px;
  --y1: -10px;
  --x2: -44px;
  --y2: -72px;
  --x3: -18px;
  --y3: -142px;
  --x4: -132px;
  --y4: -220px;
  --x5: -260px;
  --y5: -330px;
  --r1: -9deg;
  --r2: 16deg;
  --r3: -28deg;
  --r4: 42deg;
  --r5: 68deg;
  --ember: #e0a22d;
  --glow: rgba(224, 130, 34, 0.62);
  --softness: 0.18px;
  --duration: 16.8s;
  --delay: 0s;
  position: absolute;
  top: 58%;
  left: 49%;
  width: 0.9px;
  height: 0.9px;
  opacity: 0;
  border-radius: 50%;
  background: var(--ember);
  box-shadow:
    0 0 1.2px var(--ember),
    0 0 3.2px var(--glow);
  transform-origin: center;
  animation: candle-ember-scurry var(--duration) var(--delay) linear infinite;
}

.candle-embers i:nth-child(1) {
  --x1: -8px; --y1: -10px; --x2: -44px; --y2: -72px; --x3: -91px; --y3: -148px; --x4: -169px; --y4: -232px; --x5: -286px; --y5: -348px;
  --r1: -7deg; --r2: -13deg; --r3: -18deg; --r4: -24deg; --r5: -31deg;
  --ember: #f4dd8b; --glow: rgba(232, 174, 69, 0.62); --duration: 9.6s; --delay: -2.1s;
}

.candle-embers i:nth-child(2) {
  --x1: 7px; --y1: -9px; --x2: 49px; --y2: -57px; --x3: 105px; --y3: -119px; --x4: 194px; --y4: -196px; --x5: 323px; --y5: -286px;
  --r1: 6deg; --r2: 11deg; --r3: 16deg; --r4: 22deg; --r5: 28deg;
  --ember: #d99335; --glow: rgba(201, 115, 39, 0.58); --duration: 11.4s; --delay: -8.7s;
}

.candle-embers i:nth-child(3) {
  --x1: -9px; --y1: -8px; --x2: -65px; --y2: -49px; --x3: -47px; --y3: -111px; --x4: -224px; --y4: -174px; --x5: -392px; --y5: -249px;
  --r1: -5deg; --r2: -13deg; --r3: 8deg; --r4: -19deg; --r5: -27deg;
  --ember: #e6a33c; --glow: rgba(218, 132, 42, 0.6); --duration: 13s; --delay: -4.6s;
}

.candle-embers i:nth-child(4) {
  --x1: 4px; --y1: -12px; --x2: 23px; --y2: -91px; --x3: 51px; --y3: -182px; --x4: 101px; --y4: -296px; --x5: 184px; --y5: -421px;
  --r1: 4deg; --r2: 8deg; --r3: 12deg; --r4: 17deg; --r5: 23deg;
  --ember: #fff0a0; --glow: rgba(244, 197, 83, 0.62); --duration: 10.1s; --delay: -7.3s;
}

.candle-embers i:nth-child(5) {
  --x1: -3px; --y1: -11px; --x2: -19px; --y2: -79px; --x3: -43px; --y3: -171px; --x4: -84px; --y4: -281px; --x5: -143px; --y5: -389px;
  --r1: -4deg; --r2: -8deg; --r3: -12deg; --r4: -17deg; --r5: -22deg;
  --ember: #c57c2e; --glow: rgba(184, 98, 31, 0.5); --duration: 14s; --delay: -8.2s;
}

.candle-embers i:nth-child(6) {
  --x1: 9px; --y1: -7px; --x2: 61px; --y2: -41px; --x3: 131px; --y3: -88px; --x4: 247px; --y4: -151px; --x5: 412px; --y5: -218px;
  --r1: 5deg; --r2: 9deg; --r3: 14deg; --r4: 19deg; --r5: 25deg;
  --ember: #e0a22d; --glow: rgba(224, 130, 34, 0.62); --duration: 11.8s; --delay: -10.7s;
}

.candle-embers i:nth-child(7) {
  --x1: -10px; --y1: -9px; --x2: -73px; --y2: -56px; --x3: -54px; --y3: -132px; --x4: -251px; --y4: -214px; --x5: -438px; --y5: -309px;
  --r1: -6deg; --r2: -14deg; --r3: 7deg; --r4: -18deg; --r5: -28deg;
  --ember: #b86e2b; --glow: rgba(169, 83, 27, 0.48); --duration: 15.2s; --delay: -13.5s;
}

.candle-embers i:nth-child(8) {
  --x1: 6px; --y1: -10px; --x2: 41px; --y2: -82px; --x3: 88px; --y3: -179px; --x4: 165px; --y4: -306px; --x5: 276px; --y5: -447px;
  --r1: 4deg; --r2: 8deg; --r3: 13deg; --r4: 18deg; --r5: 24deg;
  --ember: #edbc55; --glow: rgba(228, 157, 52, 0.58); --duration: 13.4s; --delay: -5.9s;
}

.candle-embers i:nth-child(9) {
  --x1: 1px; --y1: -13px; --x2: 12px; --y2: -102px; --x3: 29px; --y3: -211px; --x4: 48px; --y4: -348px; --x5: 67px; --y5: -493px;
  --r1: 2deg; --r2: 5deg; --r3: 8deg; --r4: 11deg; --r5: 15deg;
  --ember: #d78a30; --glow: rgba(196, 104, 31, 0.54); --duration: 10.7s; --delay: -8.9s;
}

.candle-embers i:nth-child(10) {
  --x1: -7px; --y1: -12px; --x2: -48px; --y2: -87px; --x3: -104px; --y3: -193px; --x4: -193px; --y4: -317px; --x5: -318px; --y5: -458px;
  --r1: -4deg; --r2: -8deg; --r3: -13deg; --r4: -18deg; --r5: -24deg;
  --ember: #f1cf64; --glow: rgba(232, 164, 57, 0.58); --duration: 14.6s; --delay: -12.6s;
}

.candle-embers i:nth-child(11) {
  --x1: 10px; --y1: -8px; --x2: 69px; --y2: -64px; --x3: 48px; --y3: -146px; --x4: 269px; --y4: -244px; --x5: 462px; --y5: -346px;
  --r1: 6deg; --r2: 14deg; --r3: -7deg; --r4: 19deg; --r5: 29deg;
  --ember: #ca7929; --glow: rgba(184, 91, 28, 0.5); --duration: 12.3s; --delay: -8.2s;
}

/* Six quicker sparks live closer to the flame. Their shorter, cleaner paths
   make the emission feel active without turning the distant field into snow. */
.candle-embers i:nth-child(12) {
  --x1: -4px; --y1: -9px; --x2: -19px; --y2: -38px; --x3: -43px; --y3: -73px; --x4: -77px; --y4: -112px; --x5: -126px; --y5: -157px;
  --r1: -3deg; --r2: -6deg; --r3: -9deg; --r4: -12deg; --r5: -16deg;
  --ember: #ffe9a0; --glow: rgba(241, 190, 80, 0.64); --duration: 5.8s; --delay: -1.3s;
}

.candle-embers i:nth-child(13) {
  --x1: 5px; --y1: -8px; --x2: 23px; --y2: -34px; --x3: 51px; --y3: -68px; --x4: 94px; --y4: -104px; --x5: 151px; --y5: -143px;
  --r1: 3deg; --r2: 6deg; --r3: 9deg; --r4: 12deg; --r5: 15deg;
  --ember: #e9b64d; --glow: rgba(221, 150, 47, 0.56); --duration: 6.7s; --delay: -4.8s;
}

.candle-embers i:nth-child(14) {
  --x1: -2px; --y1: -11px; --x2: -11px; --y2: -44px; --x3: -23px; --y3: -87px; --x4: -41px; --y4: -138px; --x5: -66px; --y5: -198px;
  --r1: -2deg; --r2: -4deg; --r3: -6deg; --r4: -8deg; --r5: -11deg;
  --ember: #d89535; --glow: rgba(196, 113, 35, 0.5); --duration: 7.5s; --delay: -2.9s;
}

.candle-embers i:nth-child(15) {
  --x1: 3px; --y1: -10px; --x2: 14px; --y2: -41px; --x3: 31px; --y3: -81px; --x4: 56px; --y4: -129px; --x5: 89px; --y5: -184px;
  --r1: 2deg; --r2: 4deg; --r3: 6deg; --r4: 9deg; --r5: 12deg;
  --ember: #f5d879; --glow: rgba(232, 174, 65, 0.58); --duration: 6.2s; --delay: -5.4s;
}

.candle-embers i:nth-child(16) {
  --x1: -6px; --y1: -7px; --x2: -29px; --y2: -29px; --x3: -62px; --y3: -58px; --x4: -108px; --y4: -91px; --x5: -168px; --y5: -128px;
  --r1: -4deg; --r2: -7deg; --r3: -10deg; --r4: -14deg; --r5: -18deg;
  --ember: #c9822e; --glow: rgba(178, 93, 28, 0.46); --duration: 8.1s; --delay: -3.6s;
}

.candle-embers i:nth-child(17) {
  --x1: 4px; --y1: -9px; --x2: 18px; --y2: -37px; --x3: 39px; --y3: -74px; --x4: 72px; --y4: -119px; --x5: 116px; --y5: -171px;
  --r1: 3deg; --r2: 5deg; --r3: 8deg; --r4: 11deg; --r5: 14deg;
  --ember: #ebad42; --glow: rgba(217, 137, 40, 0.54); --duration: 7.1s; --delay: -6.5s;
}

/* Most sparks are barely more than glowing motes. Two occasional particles
   retain the old scale, so a proper candle-pop can still punctuate the field. */
.candle-embers i:nth-child(n + 12) {
  width: 0.75px;
  height: 0.75px;
  --softness: 0.22px;
}

.candle-embers i:nth-child(6n) {
  width: 1.4px;
  height: 1.4px;
  --softness: 0.12px;
  border-radius: 50%;
}

.candle-embers i:nth-child(5n + 2) {
  width: 1.25px;
  height: 1.05px;
  --softness: 0.14px;
  border-radius: 50%;
}

.candle-embers i:nth-child(7n) {
  width: 0.58px;
  height: 0.58px;
  --softness: 0.24px;
}

.candle-embers i:nth-child(8),
.candle-embers i:nth-child(16) {
  width: 2.1px;
  height: 1.8px;
  --softness: 0.06px;
}

@keyframes candle-ember-scurry {
  0%, 100% {
    opacity: 0;
    filter: blur(var(--softness)) brightness(0.76);
    transform: translate3d(0, 0, 0) rotate(0) scale(0.28);
  }

  2% {
    opacity: 0.68;
    filter: blur(var(--softness)) brightness(1.42);
    transform: translate3d(var(--x1), var(--y1), 0) rotate(var(--r1)) scale(0.92);
  }

  12% {
    opacity: 0.6;
    filter: blur(var(--softness)) brightness(1.02);
    transform: translate3d(var(--x2), var(--y2), 0) rotate(var(--r2)) scale(1.06, 0.94);
  }

  25% {
    opacity: 0.48;
    filter: blur(var(--softness)) brightness(1.22);
    transform: translate3d(var(--x3), var(--y3), 0) rotate(var(--r3)) scale(0.9, 1.04);
  }

  42% {
    opacity: 0.3;
    filter: blur(var(--softness)) brightness(0.86);
    transform: translate3d(var(--x4), var(--y4), 0) rotate(var(--r4)) scale(0.82, 0.94);
  }

  62% {
    opacity: 0;
    filter: blur(var(--softness)) brightness(0.62);
    transform: translate3d(var(--x5), var(--y5), 0) rotate(var(--r5)) scale(0.12);
  }

  63%, 99% {
    opacity: 0;
    filter: blur(var(--softness)) brightness(0.62);
    transform: translate3d(var(--x5), var(--y5), 0) rotate(var(--r5)) scale(0.12);
  }
}

@keyframes candle-gloam {
  0%, 100% {
    opacity: 0.58;
    transform: scale(0.96, 0.94);
  }

  43% {
    opacity: 0.92;
    transform: scale(1.04, 1.07) translateY(-0.5%);
  }

  71% {
    opacity: 0.72;
    transform: scale(1, 1.03) translateX(0.5%);
  }
}

@keyframes candle-flicker {
  0%, 100% {
    opacity: 0.64;
    transform: scale(0.92, 1.04) rotate(-1deg);
  }

  35% {
    opacity: 0.93;
    transform: scale(1.08, 0.96) rotate(1.5deg) translateY(-1px);
  }

  68% {
    opacity: 0.74;
    transform: scale(0.98, 1.1) rotate(-0.5deg);
  }
}

.about-open .site-stage {
  transform: translateX(var(--about));
}

/* Permanent black author rail. */
.rail {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 5;
  width: var(--rail);
  padding: 22px 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  color: var(--text);
  background: var(--paper);
  border-right: 1px solid var(--border);
}

.rail::after {
  content: '';
  position: absolute;
  inset: 7px;
  pointer-events: none;
}

.name {
  position: absolute;
  top: 50%;
  left: 50%;
  writing-mode: vertical-rl;
  transform: translate(-50%, -50%);
  font-size: 25px;
  letter-spacing: 0.055em;
  color: var(--gold);
}

/* About toggle and its hamburger-to-X animation. */
.menu {
  position: absolute;
  z-index: 6;
  top: 23px;
  display: grid;
  gap: 4px;
  place-items: center;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.view-toggle {
  position: absolute;
  z-index: 6;
  bottom: 18px;
  display: grid;
  gap: 4px;
  place-items: center;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.view-toggle svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
}

.view-toggle span,
.menu > span {
  font-size: var(--text-ui);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.menu:hover,
.view-toggle:hover {
  color: #d7ad63;
}

.menu-icon {
  position: relative;
  width: 21px;
  height: 18px;
  display: block;
}

.menu-icon b {
  position: absolute;
  left: 0;
  width: 21px;
  height: 1px;
  display: block;
  background: currentColor;
  transform-origin: center;
  transition:
    top 0.25s ease,
    opacity 0.2s ease,
    transform 0.3s ease;
}

.menu-icon b:nth-child(1) { top: 2px; }
.menu-icon b:nth-child(2) { top: 8px; }
.menu-icon b:nth-child(3) { top: 14px; }

.menu.active .menu-icon b:nth-child(1) {
  top: 8px;
  transform: rotate(45deg);
}

.menu.active .menu-icon b:nth-child(2) {
  opacity: 0;
}

.menu.active .menu-icon b:nth-child(3) {
  top: 8px;
  transform: rotate(-45deg);
}

/* Horizontally scrolling article field. */
.articles {
  position: relative;
  z-index: 1;
  height: 100%;
  margin-left: var(--rail);
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  background: transparent;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.articles::-webkit-scrollbar {
  display: none;
}

/* The stage stays full-width when About opens, so reserve an equivalent amount
   of invisible shelf at the far end. This extends the real scroll range to the
   edge of the newly cropped viewport without disturbing the opening spines. */
.articles::after {
  content: '';
  height: 100%;
  flex: 0 0 0;
  pointer-events: none;
  transition: flex-basis 0.62s cubic-bezier(0.65, 0, 0.18, 1);
}

.about-open .articles::after {
  flex-basis: var(--about);
}

/* Disable snapping while card widths exchange places, so the clicked spine can
   remain visually anchored instead of briefly jumping beneath the rail. */
.articles.is-reflowing {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.articles.is-reflowing .card {
  scroll-snap-align: none;
}

.card {
  position: relative;
  flex: 0 0 min(36vw, 400px);
  height: 100%;
  padding: var(--space-6) var(--space-5) var(--space-4);
  overflow: hidden;
  background: var(--paper);
  scroll-snap-align: start;
  border-right: 1px solid var(--border);
  transition:
    flex-basis 0.48s cubic-bezier(0.2, 0.75, 0.25, 1),
    padding 0.48s;
}

/* An empty final folio gives the shelf mouse somewhere to be discovered. */
.ghost-card {
  flex: 0 0 min(36vw, 400px);
  height: 100%;
  scroll-snap-align: start;
  pointer-events: none;
}

.spine-trigger {
  display: none;
}

.number,
.collapsed-title,
.collapsed-publication {
  display: none;
}

.content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.publication {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  color: var(--gold);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-meta);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Image link and engraved monochrome treatment. */
.image-link {
  order: 1;
  display: block;
  color: inherit;
  text-decoration: none;
}

.image-frame {
  position: relative;
  width: 100%;
  height: min(34vh, 300px);
  padding: 4px;
  overflow: hidden;
  /* background: #d8d0c0; */
  border: 2px solid #d8d0c0;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.image-frame::after {
  content: '';
  position: absolute;
  inset: 4px;
  z-index: 1;
  opacity: 0.2;
  pointer-events: none;
  background: repeating-linear-gradient(
    108deg,
    rgba(20, 17, 12, 0.75) 0,
    rgba(20, 17, 12, 0.75) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode: multiply;
  transition: opacity 0.35s;
}

.card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.72) brightness(0.9) sepia(0.08);
  transition: filter 0.35s;
}

.card:hover .image-frame::after {
  opacity: 0;
}

.card:hover img {
  filter: grayscale(0%) contrast(1.04) brightness(1) sepia(0);
}

.image-link:hover .image-frame,
.image-link:focus-visible .image-frame {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(224, 194, 110, 0.28);
}

/* The headline and standfirst share one suspended folio block. */
.card h2 {
  max-width: 18ch;
  margin: 0 auto var(--space-2);
  font-size: var(--text-headline);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-wrap: balance;
}

.article-folio {
  order: 2;
  margin-top: var(--space-4);
  min-height: 80px;
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: minmax(12px, 1fr) auto minmax(12px, 1fr);
  justify-items: center;
  gap: var(--space-2);
}

.article-folio::before,
.article-folio::after {
  content: '';
  width: 1px;
  height: 100%;
  min-height: 12px;
  background: linear-gradient(transparent, var(--rule));
}

.article-folio::after {
  background: linear-gradient(var(--rule), transparent);
}

.folio-copy {
  width: 100%;
  display: grid;
  justify-items: center;
}

.headline-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}

.headline-link:hover,
.headline-link:focus-visible {
  color: var(--gold);
  outline: none;
}

.article-folio p {
  max-width: var(--measure-article);
  margin: 0;
  font-size: var(--text-body);
  font-style: normal;
  line-height: var(--leading-body);
  text-align: center;
  color: var(--text-soft);
}

/* Centred, double-rule article CTA. */
.cta-link {
  order: 4;
  width: max-content;
  margin: var(--space-1) auto 0;
  padding: var(--space-1) var(--space-3);
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: 17px;
  font-style: italic;
  text-decoration: none;
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    letter-spacing 0.25s ease;
}

.cta-link svg {
  width: 16px;
}

.cta-link:hover,
.cta-link:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
  letter-spacing: 0.02em;
  outline: none;
}

/* Collapsed, headline-only index. */
.compact .card {
  flex-basis: 96px;
  padding: 0;
}

.compact .spine-trigger {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  padding: 22px 15px;
  display: block;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.compact .spine-trigger:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: -5px;
}

.compact .spine-trigger:hover .collapsed-title,
.compact .spine-trigger:focus-visible .collapsed-title {
  color: var(--gold);
}

.compact .number {
  position: absolute;
  top: 22px;
  left: 50%;
  display: block;
  color: var(--red);
  font-size: var(--text-index-number);
  text-align: center;
  font-variant-numeric: oldstyle-nums;
  transform: translateX(-50%);
}

.compact .content {
  display: none;
}

.compact .collapsed-title {
  position: absolute;
  top: 82px;
  bottom: clamp(148px, 21vh, 205px);
  left: 50%;
  display: block;
  height: auto;
  max-height: none;
  width: max-content;
  overflow: hidden;
  writing-mode: vertical-rl;
  text-orientation: sideways;
  transform: translateX(-50%);
  font-size: clamp(11px, 1.8vh, 18px);
  line-height: 1.02;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.compact .collapsed-publication {
  position: absolute;
  bottom: 18px;
  left: 50%;
  display: block;
  width: max-content;
  max-height: clamp(105px, 18vh, 170px);
  overflow: hidden;
  writing-mode: vertical-rl;
  transform: translateX(-50%);
  color: #ad9860;
  font-size: clamp(8px, 1.17vh, 11px);
  line-height: 1;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  text-shadow: 0.35px 0 0 currentColor;
}

/* Clicking opens a single folio without leaving index mode. */
.compact .card.peek {
  flex-basis: min(36vw, 400px);
  padding: var(--space-6) var(--space-5) var(--space-4);
}

.compact .card.peek .spine-trigger {
  display: none;
}

.compact .card.peek .content {
  display: flex;
}

/* An individually opened folio remains illuminated while the index is browsed. */
.compact .card.peek .image-frame::after {
  opacity: 0;
}

.compact .card.peek img {
  filter: grayscale(0%) contrast(1.04) brightness(1) sepia(0);
}

/* The clicked spine opens in a restrained editorial sequence. */
.compact .card.peek .publication {
  animation: folio-label-in 0.42s 0.02s both;
}

.compact .card.peek .image-link {
  animation: folio-image-in 0.18s ease-out both;
}

@keyframes folio-image-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.compact .card.peek .article-folio::before,
.compact .card.peek .article-folio::after {
  animation: folio-rule-in 0.52s 0.22s both;
}

.compact .card.peek .article-folio::before {
  transform-origin: bottom;
}

.compact .card.peek .article-folio::after {
  transform-origin: top;
}

.compact .card.peek .folio-copy {
  animation: folio-copy-in 0.48s 0.32s both;
}

.compact .card.peek .cta-link {
  animation: folio-label-in 0.4s 0.44s both;
}

@keyframes folio-label-in {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


@keyframes folio-rule-in {
  from {
    opacity: 0;
    transform: scaleY(0);
  }

  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes folio-copy-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* About leaf, positioned before the rail rather than over the articles. */
.about-panel {
  position: fixed;
  z-index: 4;
  inset: 0 auto 0 0;
  width: var(--about);
  padding: var(--space-8) var(--space-7);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--text-about);
  background: var(--paper);
  border-right: 1px solid var(--border-dark);
  transform: translateX(-100%);
  transition: transform 0.62s cubic-bezier(0.65, 0, 0.18, 1);
}

.about-open .about-panel {
  transform: none;
}

/* The second drawing anchors the opposite corner from the correspondence CTA. */
.about-rat {
  position: absolute;
  right: auto;
  left: 24px;
  bottom: 0;
  z-index: 0;
  width: 220px;
  opacity: 1;
  pointer-events: none;
}

.about-rat-trigger {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0;
  display: block;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  pointer-events: auto;
}

.about-rat-trigger:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

.about-rat img {
  transition: filter 0.65s ease;
}

.about-rat.candle-is-out img {
  filter: brightness(0.58) saturate(0.42) sepia(0.08);
}

.about-rat .candle-aura {
  top: 3.5%;
  left: 73.5%;
  width: 18%;
}

.about-rat.candle-is-out .candle-aura {
  opacity: 0 !important;
  animation-play-state: paused;
}

.about-panel > :not(.about-rat) {
  position: relative;
  z-index: 2;
}

.about-panel h1 {
  margin: var(--space-3) 0 var(--space-5);
  font-size: var(--text-display);
  font-weight: 400;
  line-height: var(--leading-display);
}

.about-panel p {
  max-width: var(--measure-about);
  font-size: var(--text-body);
  line-height: 1.42;
}

.about-panel .rule {
  margin: 0 0 var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--gold);
}

.about-panel .rule::before,
.about-panel .rule::after {
  content: '';
  height: 1px;
  flex: 1;
  background: #615a4b;
}

.about-panel .note {
  color: #9c9587;
  font-size: var(--text-meta);
}

.about-panel a {
  position: relative;
  z-index: 2;
  order: 4;
  width: max-content;
  margin-top: auto;
  margin-left: auto;
  padding-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-about);
  border-bottom: 1px solid;
  font-size: 16px;
  font-style: italic;
  text-decoration: none;
}

.about-panel a svg {
  width: 16px;
}

.about-panel a:hover {
  color: #c19965;
}

@media (max-width: 700px) {
  :root {
    --rail: 70px;
    --about: calc(100vw - var(--rail));
  }

  .rail {
    padding-top: 16px;
  }

  .card {
    flex-basis: calc(100vw - var(--rail));
    padding: var(--space-4) var(--space-3);
  }

  .ghost-card {
    display: none;
  }

  .compact .ghost-card {
    display: block;
    flex: 0 0 120px;
  }

  .compact .card {
    flex-basis: 72px;
  }

  .compact .card.peek {
    flex-basis: calc(100vw - var(--rail));
  }

  .name {
    font-size: var(--text-body);
  }

  .view-toggle {
    gap: 3px;
  }

  .view-toggle svg {
    width: 17px;
    height: 17px;
  }

  .view-toggle span {
    font-size: 8px;
    letter-spacing: 0.08em;
  }

  .about-panel {
    padding: var(--space-10) var(--space-6) var(--space-6);
  }

  .about-panel h1 {
    font-size: var(--space-9);
  }

  .about-panel p {
    font-size: 16px;
  }

  .shelf-easter-egg {
    right: 6px;
    width: 100px;
  }

  .about-rat {
    width: 95px;
  }

  .card h2 {
    font-size: 38px;
  }

  .image-frame {
    height: 28vh;
  }

  .article-folio p {
    font-size: var(--text-small);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }

  .atmosphere {
    display: none;
  }
}

/* WordPress theme additions. */
.view-toggle .icon-maximize {
  display: none;
}

.hw-app.compact .view-toggle .icon-minimize {
  display: none !important;
}

.hw-app.compact .view-toggle .icon-maximize {
  display: block !important;
}

.hw-empty-state {
  flex: 1 0 min(720px, calc(100vw - var(--rail)));
  padding: 8vw;
  display: grid;
  place-items: center;
  color: rgba(238, 232, 217, 0.8);
  font-size: 20px;
  line-height: 1.5;
  text-align: center;
}

.hw-empty-state p {
  max-width: var(--measure-article);
}

/* --------------------------------------------------------------------------
   Current-site additions
   -------------------------------------------------------------------------- */

/* Keep the view-control label on two lines without putting presentation in JS. */
.view-toggle [data-view-label] {
  line-height: 1.15;
  text-align: center;
}

.view-toggle [data-view-label]::after {
  content: 'ALL';
  display: block;
  margin-top: 2px; /* optical exception: deliberately tighter than the 6px rhythm */
}

/* About-page CMS links: email / LinkedIn / Substack. */
.about-panel > .about-socials {
  position: absolute;
  right: var(--space-7);
  bottom: var(--space-6);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Reset the older generic About-link styling inside the icon group. */
.about-socials a {
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--text-about);
  border: 0;
  font-size: var(--text-body);
  font-style: normal;
  text-decoration: none;
  opacity: 0.88;
  transition:
    color 0.2s ease,
    opacity 0.2s ease,
    transform 0.2s ease;
}

.about-socials a:hover,
.about-socials a:focus-visible {
  color: var(--gold);
  opacity: 1;
  transform: translateY(-2px);
  outline: none;
}

.about-socials i {
  line-height: 1;
}

/* Initial page loader. */
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--paper);
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.5s ease,
    visibility 0s linear 0.5s;
}

.site-loader.is-loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-loader__spinner {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(234, 227, 211, 0.22);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: site-loader-spin 0.8s linear infinite;
}

@keyframes site-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 700px) {
  .about-panel > .about-socials {
    right: var(--space-6);
    bottom: var(--space-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-loader__spinner {
    animation-duration: 1.6s;
  }

  .site-loader {
    transition-duration: 0.2s;
  }
}

/* --------------------------------------------------------------------------
   Short desktop viewport tuning

   Width alone is a poor guide for this layout: a wide laptop window can still
   be relatively short. These rules preserve the full-size composition on taller
   displays, then progressively tighten type, imagery and vertical rhythm when
   height becomes the limiting dimension.
   -------------------------------------------------------------------------- */

@media (min-width: 701px) and (max-height: 900px) {
  :root {
    --text-headline: clamp(30px, 4.8vh, 40px);
    --text-display: clamp(58px, 9.25vh, 78px);
  }

  .card,
  .compact .card.peek {
    padding: var(--space-4) var(--space-5) var(--space-3);
  }

  .publication {
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-1);
  }

  .image-frame {
    height: min(31vh, 260px);
  }

  .article-folio {
    margin-top: var(--space-3);
    gap: var(--space-1);
  }

  .article-folio p {
    max-width: 34ch;
    font-size: 16px;
    line-height: 1.38;
  }

  .cta-link {
    margin-top: 0;
    padding-block: var(--space-1);
    font-size: 16px;
  }

  .about-panel {
    padding-top: var(--space-6);
    padding-bottom: var(--space-5);
  }

  .about-panel h1 {
    margin: var(--space-2) 0 var(--space-4);
  }

  .about-panel p,
  .about-copy p {
    font-size: 17px;
    line-height: 1.38;
  }

  /* Decorative characters should scale with available height on laptop-shaped
     screens rather than remaining at their tall-desktop maximum. */
  .shelf-easter-egg {
    width: min(205px, 24vh);
  }

  .about-rat {
    width: min(175px, 21vh);
  }

  .about-panel > .about-socials {
    bottom: var(--space-4);
  }

  .compact .number {
    top: var(--space-3);
    font-size: 28px;
  }

  .compact .collapsed-title {
    top: 70px;
    bottom: clamp(135px, 20vh, 180px);
    font-size: clamp(11px, 1.65vh, 16px);
  }

  .compact .collapsed-publication {
    bottom: var(--space-2);
    max-height: clamp(95px, 17vh, 145px);
  }
}

@media (min-width: 701px) and (max-height: 760px) {
  :root {
    --text-headline: clamp(28px, 4.6vh, 35px);
    --text-display: clamp(54px, 8.8vh, 67px);
  }

  .card,
  .compact .card.peek {
    padding-top: var(--space-3);
    padding-bottom: var(--space-2);
  }

  .publication {
    font-size: 11px;
  }

  .image-frame {
    height: min(29vh, 220px);
  }

  .article-folio {
    margin-top: var(--space-2);
  }

  .article-folio p {
    font-size: 15px;
    line-height: 1.34;
  }

  .cta-link {
    font-size: 15px;
  }

  .about-panel {
    padding-top: var(--space-5);
    padding-bottom: var(--space-4);
  }

  .about-panel h1 {
    margin-top: var(--space-1);
    margin-bottom: var(--space-3);
  }

  .about-panel p,
  .about-copy p {
    font-size: 16px;
    line-height: 1.35;
  }

  .shelf-easter-egg {
    width: min(180px, 23vh);
  }

  .about-rat {
    width: min(150px, 19.5vh);
  }

  .about-panel > .about-socials {
    bottom: var(--space-3);
  }
}