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

:root {
  --plaster: #DDDCD7;
  --grout: #D3D2CD;        /* the mortar joint, a breath darker than the wall */
  --stone-dark: #3A3934;
  --stone-mid: #66645C;    /* secondary text that carries information (AA on wall and sheet) */
  --stone-faint: #8A887F;  /* purely decorative text only */
  --accent: #8E5B45;
  --warm-light: #F3E9D2;
  --serif: 'Cormorant Garamond', Georgia, serif;

  /* Surface grain, one per surface: coarser grain reads as nearer to the eye */
  --noise-wall:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-near:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23m)'/%3E%3C/svg%3E");
  --panel-w: 480px;        /* steps up at 1280, 1600, 1920 and 2400, never fluid */
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--plaster);
  font-family: var(--serif);
  overscroll-behavior: none;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
a { color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── Floating header ───────────────────────── */
#header {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 48px;
  width: min(1000px, 96vw);
  padding: 22px 70px 26px;
  background: linear-gradient(to bottom, rgba(232,231,226,0.96), rgba(232,231,226,0.65) 60%, rgba(232,231,226,0));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(to right, transparent, black 60px, black calc(100% - 60px), transparent);
  mask-image: linear-gradient(to right, transparent, black 60px, black calc(100% - 60px), transparent);
  user-select: none;
  transition: opacity 1.1s ease;
}
#header.away { opacity: 0; pointer-events: none; }

#header .title {
  font-family: var(--serif);
  font-size: 15px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(58,57,52,0.85);
  text-shadow: 0 1px 0 rgba(255,255,255,0.75);
  white-space: nowrap;
  text-decoration: none;
}
a.title:hover { color: var(--accent); }

.hbtn {
  background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--serif);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--stone-mid);
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
  padding: 4px 2px;
  transition: color 0.25s;
  white-space: nowrap;
  text-decoration: none;
}
.hbtn:hover { color: var(--accent); }
.hbtn svg { width: 15px; height: 15px; fill: currentColor; }
.hgroup { display: inline-flex; gap: 34px; align-items: center; }

/* Wall · Index: the view switch, engraved like the original's language toggle */
.views { gap: 0; letter-spacing: 0.14em; cursor: default; }
.views svg { margin-right: 8px; }
.views a {
  color: var(--stone-faint); opacity: 0.6;
  text-decoration: none;
  transition: color 0.25s, opacity 0.25s;
}
.views a.on { color: var(--stone-dark); opacity: 1; }
.views a:not(.on):hover { color: var(--accent); opacity: 1; }
.views i { font-style: normal; opacity: 0.4; margin: 0 6px; }
.views-icon { display: none; }

/* ── Infinite wall ─────────────────────────── */
#wall {
  position: fixed; inset: 0;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;         /* a finger drags the wall instead of scrolling the page */
  background: var(--grout);   /* mortar showing through the seams */
}
#wall.dragging { cursor: grabbing; }

.tile {
  position: absolute;
  top: 0; left: 0;
  display: block;
  background: var(--plaster);
  overflow: hidden;
  color: inherit; text-decoration: none;
  -webkit-user-drag: none;
  /* recessed V-joint: light catching the groove's lower lip reads as a carving */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 1px 0 0 rgba(255,255,255,0.28);
  will-change: transform;
}

.relief {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, black 42%, transparent 88%);
  mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, black 42%, transparent 88%);
}
.tile .relief { opacity: 0; transition: opacity 0.6s ease; }
.tile .relief.loaded { opacity: 1; }
/* a portrait that is still a plain photo: pressed into the plaster until its relief is made */
.relief.photo { filter: grayscale(1) contrast(0.85) brightness(1.18); mix-blend-mode: multiply; }

.tint-img {
  position: absolute; inset: 0;
  mix-blend-mode: color;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
#focus .tint-img { opacity: 0.22; }

.tile .glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 44%, var(--warm-light) 0%, rgba(243,233,210,0.35) 38%, rgba(243,233,210,0) 68%);
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}
@media (hover: none) {
  .tile:hover .glow { opacity: 0.3; }
}
.tile.lit .glow { opacity: 0.6; }
.tile.scanning .glow { opacity: 0.85; transition: opacity 0.15s ease; }
.tile.dimmed-out { opacity: 0.4; transition: opacity 0.7s ease; }

.tile-name {
  position: absolute;
  bottom: 14px; left: 0; right: 0;
  text-align: center;
  font-family: var(--serif);
  opacity: 0;
  transition: opacity 0.45s ease, color 0.45s ease;
  pointer-events: none;
  color: var(--stone-mid);
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}
.n-main {
  font-size: 14px; font-weight: 400;
  letter-spacing: 0.26em; text-transform: uppercase;
  display: block;
}
.n-sub {
  font-size: 10px; font-weight: 400;
  letter-spacing: 0.3em; text-transform: uppercase;
  display: block;
  margin-top: 3px;
  opacity: 0.75;
}
.tile:hover .tile-name, .tile:focus-visible .tile-name { opacity: 1; }
.tile.matched .tile-name { opacity: 1; color: var(--accent); }
.tile:focus-visible { outline: 1.5px solid var(--accent); outline-offset: -10px; }
.tile:focus:not(:focus-visible) { outline: none; }

/* before the script lays the wall out (and for readers without scripts) the
   portraits sit in a plain grid of the same tiles */
.wall-static {
  position: absolute; inset: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-rows: 260px;
  gap: 1px;
  padding-top: 80px;
}
.wall-static .tile { position: relative; }
.wall-static .tile .relief { opacity: 1; }
.wall-static .tile .tile-name { opacity: 1; }
.js .wall-static { display: none; }

/* ── Plaster tooth: fine grain over the wall, reliefs included ── */
#grain {
  position: fixed; inset: -200px;
  pointer-events: none;
  z-index: 40;
  mix-blend-mode: overlay;
  opacity: 0.42;
  background-image: var(--noise-wall);
}
#grain::after {
  content: ''; position: absolute; inset: 0;
  opacity: 0.2;   /* the uneven trowelled surface under the grain */
  background-image: var(--noise-mottle);
}
#grain-focus {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 170;
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity 0.7s ease;
  background-image: var(--noise-near);
}
#veil.show ~ #grain-focus { opacity: 0.3; }

#panel::after {
  content: ''; position: absolute; inset: 0;
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: overlay;
  opacity: 0.34;
  background-image: var(--noise-paper);
  -webkit-mask-image: linear-gradient(to right, transparent 70px, black 210px);
  mask-image: linear-gradient(to right, transparent 70px, black 210px);
}

/* ── Sunlight: a pool of soft afternoon light follows the cursor ── */
#sunlight {
  position: fixed;
  left: 0; top: 0;
  pointer-events: none;
  z-index: 50;
  mix-blend-mode: plus-lighter;
  opacity: 0;
  will-change: transform, opacity;
}

/* ── Focus view ────────────────────────────── */
#veil {
  position: fixed; inset: 0;
  z-index: 150;
  background: rgba(225,224,219,0.95);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
  will-change: opacity;
}
#veil.show {
  opacity: 1; pointer-events: auto;
  /* the wall goes soft behind the portrait, so only she or he is sharp */
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

#focus {
  position: fixed;
  z-index: 160;
  top: 50%; left: calc((100% - var(--panel-w)) / 2);
  width: min(58vh, 640px);
  height: min(58vh, 640px);
  transform: translate(-50%, -50%) scale(0.82);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease, transform 1.25s cubic-bezier(0.3,0.9,0.25,1);
  will-change: transform, opacity;
}
#focus.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#focus .glow {
  position: absolute; inset: -10%;
  background: radial-gradient(circle at 50% 44%, var(--warm-light) 0%, rgba(243,233,210,0.4) 40%, rgba(243,233,210,0) 70%);
}
#focus figcaption { display: none; }

/* ── Sidebar ───────────────────────────────── */
#panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: var(--panel-w);
  z-index: 200;
  background: linear-gradient(to left, rgba(232,231,226,1) 55%, rgba(232,231,226,0.97) 75%, rgba(232,231,226,0.88) 90%, rgba(232,231,226,0));
  -webkit-mask-image: linear-gradient(to right, transparent, rgba(0,0,0,0.4) 60px, black 130px);
  mask-image: linear-gradient(to right, transparent, rgba(0,0,0,0.4) 60px, black 130px);
  transform: translateX(105%);
  transition: transform 1.05s cubic-bezier(0.22,1,0.36,1);
  display: flex; flex-direction: column;
  overflow: hidden;
  will-change: transform;
}
#panel.open { transform: translateX(0); }

/* While the sheet is out, the wall behind it goes soft. The haze reaches further left
   than the sheet and is fully blurred before the sheet's first line of text, so no
   portrait ever sits sharp behind the words. It lies under the veil, so the portrait
   that steps forward is never blurred. */
#panel-haze {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: calc(var(--panel-w) + 160px);
  z-index: 145;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
  backdrop-filter: blur(16px) saturate(0.9);
  -webkit-backdrop-filter: blur(16px) saturate(0.9);
  -webkit-mask-image: linear-gradient(to right, transparent, black 200px);
  mask-image: linear-gradient(to right, transparent, black 200px);
}
#panel.open ~ #panel-haze { opacity: 1; }

#panel-head {
  padding: 72px 40px 14px 88px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
#panel-label {
  font-family: var(--serif);
  font-size: 11px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--stone-mid);
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}
#panel-x {
  background: none; border: none; cursor: pointer;
  color: var(--stone-mid); padding: 4px 2px;
  transition: color 0.25s;
  line-height: 0;
}
#panel-x svg { fill: currentColor; width: 15px; height: 15px; }
#panel-x:hover { color: var(--accent); }

#panel-body {
  flex: 1; overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 40px 40px 88px;
  scrollbar-width: thin;
  scrollbar-color: rgba(58,57,52,0.15) transparent;
}
#panel-body::-webkit-scrollbar { width: 3px; }
#panel-body::-webkit-scrollbar-thumb { background: rgba(58,57,52,0.15); }

.mode { display: none; }
.mode.active { display: block; }

#panel-foot {
  display: none;
  padding: 14px 40px 30px 88px;
  flex-shrink: 0;
}
#panel.ask #panel-foot { display: block; }

/* ── conversation with the keeper ── */
.msg { margin-bottom: 22px; }
.msg.you {
  text-align: right;
  font-style: italic;
  font-size: 13.5px; color: var(--stone-mid);
  line-height: 1.65;
  padding-left: 40px;
}
.msg.her {
  font-size: 14px; font-weight: 400;
  color: var(--stone-dark); line-height: 1.7;
}
.msg.her .surf { opacity: 0; animation: surface 0.55s ease-out forwards; }
@keyframes surface { to { opacity: 1; } }
.msg .speaker {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--stone-mid);
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
  margin-bottom: 5px;
}

/* thinking: three rings incised in the sheet, deepening one after another */
.msg.thinking .dots { display: inline-flex; gap: 8px; height: 14px; align-items: center; padding-left: 1px; }
.msg.thinking .dots i {
  display: block; width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid rgba(58,57,52,0.26);
  box-shadow:
    inset 0.5px 1px 1px rgba(58,57,52,0.18),
    0 1px 0 rgba(255,255,255,0.75);
  opacity: 0.45;
  animation: ring-deepen 1.5s ease-in-out infinite;
}
.msg.thinking .dots i:nth-child(2) { animation-delay: 0.2s; }
.msg.thinking .dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes ring-deepen {
  0%, 62%, 100% { opacity: 0.45; }
  28%           { opacity: 1; }
}

.msg.tip {
  font-style: italic; font-size: 14px;
  color: var(--stone-faint); opacity: 0.6;
  text-align: center;
  line-height: 1.7;
  padding: 6px 0;
}

/* a name the keeper found: engraved like the profile, smaller */
.hit { margin: 0 0 22px; }
.hit .m-name {
  display: block;
  font-size: 24px; font-weight: 400;
  color: var(--stone-dark); line-height: 1.2;
  margin: 4px 0 2px;
  text-decoration: none;
  transition: color 0.3s;
}
.hit .m-name:hover { color: var(--accent); }
.hit .m-era {
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--stone-mid);
  margin-bottom: 10px;
}
.hit .m-snip { font-size: 14px; color: var(--stone-dark); line-height: 1.7; margin-bottom: 4px; }
.hit .hl { font-style: normal; color: var(--accent); }

.btn-talk.in-chat {
  margin: 8px 0 6px;
  padding: 5px 14px;
  font-size: 10.5px;
  letter-spacing: 0.22em;
}

/* ── nominate form: carved frames, engraved labels ── */
.field { margin-bottom: 20px; position: relative; }
.field-error {
  position: absolute; right: 0; bottom: -15px;
  font-size: 10.5px; font-style: italic;
  color: rgba(180,80,60,0.8);
  pointer-events: none;
}
.field label {
  display: block;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--stone-mid);
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
  margin-bottom: 8px;
}
.field input, .field textarea {
  display: block;
  width: 100%;
  background: rgba(228,227,222,0.55);
  border: 1px solid rgba(58,57,52,0.16);
  border-radius: 3px;
  box-shadow:
    inset 1px 1px 2px rgba(58,57,52,0.07),
    1px 1px 0 rgba(255,255,255,0.7);
  padding: 10px 13px;
  font-family: var(--serif);
  font-size: 15px; font-weight: 400;
  color: var(--stone-dark); line-height: 1.55;
  outline: none;
  resize: none;
  transition: border-color 0.3s;
}
.field input:focus, .field textarea:focus { border-color: rgba(142,91,69,0.45); }
#mode-nominate .btn-talk { margin-top: 30px; }

/* ── ask box: carved frame around the input ── */
#ask-box {
  position: relative;
  border: 1px solid rgba(58,57,52,0.16);
  box-shadow:
    inset 1px 1px 2px rgba(58,57,52,0.07),
    1px 1px 0 rgba(255,255,255,0.7);
  background: rgba(228,227,222,0.55);
  border-radius: 3px;
  padding: 12px 50px 12px 16px;
  transition: border-color 0.3s;
}
#ask-box:focus-within { border-color: rgba(142,91,69,0.45); }
#story-input {
  width: 100%;
  min-height: 58px;
  display: block;
  background: transparent;
  border: none;
  font-family: var(--serif);
  font-size: 15px; font-weight: 400;
  color: var(--stone-dark); line-height: 1.6;
  resize: none;
  outline: none;
}
#story-input::placeholder { color: rgba(58,57,52,0.35); font-style: italic; }

/* names offered while typing: an engraved list laid just above the box */
#suggest {
  list-style: none;
  margin: 0 0 8px;
  padding: 4px 0;
  max-height: 264px; overflow-y: auto;
  background: rgba(236,235,231,0.97);
  border: 1px solid rgba(58,57,52,0.12);
  border-radius: 3px;
  box-shadow: 0 8px 20px -12px rgba(58,57,52,0.35), 1px 1px 0 rgba(255,255,255,0.7);
}
#suggest li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 7px 14px;
  cursor: pointer;
}
#suggest li.on, #suggest li:hover { background: rgba(142,91,69,0.07); }
.sg-name { font-size: 15.5px; color: var(--stone-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.2s; }
#suggest li.on .sg-name { color: var(--accent); }
.sg-name .hl { font-style: normal; color: var(--accent); }
.sg-sub {
  flex-shrink: 0; max-width: 45%;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--stone-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* send: a carved roundel pressed into the plaster */
#send-btn {
  position: absolute;
  right: 11px; bottom: 11px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(58,57,52,0.14);
  background: rgba(233,232,227,0.85);
  box-shadow:
    inset 1px 1px 2px rgba(58,57,52,0.13),
    inset -1px -1px 1px rgba(255,255,255,0.6),
    1px 1px 0 rgba(255,255,255,0.75);
  color: var(--stone-mid);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.3s, opacity 0.3s;
}
#send-btn svg {
  width: 13px; height: 13px;
  stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1.2px 0 rgba(255,255,255,0.85));
}
#send-btn:hover:not(:disabled) { color: var(--accent); }
#send-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── short carved divider with roundels ── */
.r-rule {
  display: flex; align-items: center; gap: 10px;
  max-width: 230px;
  margin: 30px auto 26px;
}
.mode > .r-rule:first-child { margin-top: 0; }
.r-rule::before, .r-rule::after {
  content: ''; flex: 1; height: 2px;
  border-top: 1px solid rgba(58,57,52,0.13);
  border-bottom: 1px solid rgba(255,255,255,0.6);
}
.r-rule i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); opacity: 0.75;
  flex-shrink: 0;
}
.r-rule span {
  font-size: 12px; font-weight: 500; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--accent);
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
  white-space: nowrap;
}

.r-name {
  font-size: 28px; font-weight: 400;
  color: rgba(58,57,52,0.85); line-height: 1.12;
  text-shadow: 0 1px 0 rgba(255,255,255,0.75);
  text-align: center;
  margin-bottom: 2px;
}
.r-name .n-sub {
  display: block;
  font-size: 14px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--stone-mid);
  opacity: 1;
  margin-top: 6px;
}
.r-era {
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--stone-mid);
  text-align: center;
  margin: 10px 0 26px;
}
.r-era:has(+ .r-aka) { margin-bottom: 6px; }
.r-aka {
  font-size: 13px; font-style: italic;
  color: var(--stone-mid);
  text-align: center;
  margin-bottom: 26px;
}
/* the sections of the index this life belongs to */
.r-cats {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 4px 10px;
  margin: -12px 0 26px;
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
}
.r-cats a { color: var(--stone-faint); text-decoration: none; transition: color 0.25s; }
.r-cats a:hover { color: var(--accent); }
.r-cats i { width: 3px; height: 3px; border-radius: 50%; background: var(--accent); opacity: 0.55; }

.r-intro {
  font-size: 16px; font-weight: 300;
  color: var(--stone-dark); line-height: 1.8;
  margin-bottom: 34px;
}
.r-quote {
  font-style: italic;
  font-size: 17.5px; font-weight: 300;
  color: var(--stone-dark); line-height: 1.7;
  text-align: center;
  padding: 2px 18px;
  margin-bottom: 36px;
}

/* talk button: a carved frame around engraved letters */
.btn-talk {
  display: block;
  margin: 56px auto 12px;
  padding: 11px 30px;
  background: rgba(228,227,222,0.55);
  border: 1px solid rgba(58,57,52,0.16);
  border-radius: 3px;
  box-shadow:
    inset 1px 1px 2px rgba(58,57,52,0.07),
    1px 1px 0 rgba(255,255,255,0.7);
  cursor: pointer;
  font-family: var(--serif);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--stone-mid);
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
  transition: color 0.3s, border-color 0.3s;
}
.btn-talk:hover { color: var(--accent); border-color: rgba(142,91,69,0.45); }
.btn-talk:disabled { opacity: 0.5; cursor: default; }

/* the two buttons that close a life: read on, or tell us what is wrong */
.r-actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px 16px;
  margin: 56px 0 12px;
}
.r-actions .btn-talk { margin: 0; min-width: min(100%, 290px); }
.r-actions [data-correct] { color: var(--stone-faint); }
.r-actions [data-correct]:hover, .r-actions [data-correct][aria-expanded="true"] { color: var(--accent); }

/* the correction box opens under them, set like the nominate form */
.r-correct { margin-top: 34px; }
.r-correct .msg.tip { margin-bottom: 18px; }
.r-correct .btn-talk { margin-top: 26px; }

/* a note after sending: thanks, or what went wrong and another way to reach us */
.form-note { margin-top: 18px; }
.form-note a { color: var(--accent); }
.form-note .btn-talk { margin: 14px auto 0; display: inline-block; text-decoration: none; font-style: normal; opacity: 1; }

/* the bots' field: present for them, never for anyone else */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* the photo: a carved frame like the other fields, with the picture shown once chosen */
.field label.drop {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0;
  font-weight: 400; letter-spacing: normal; text-transform: none; text-shadow: none;
  min-height: 74px;
  padding: 12px 14px;
  background: rgba(228,227,222,0.55);
  border: 1px dashed rgba(58,57,52,0.22);
  border-radius: 3px;
  box-shadow: inset 1px 1px 2px rgba(58,57,52,0.07), 1px 1px 0 rgba(255,255,255,0.7);
  cursor: pointer;
  transition: border-color 0.3s;
}
.drop:hover, .drop.over, .drop:focus-within { border-color: rgba(142,91,69,0.45); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-text {
  font-size: 14px; font-style: italic;
  color: rgba(58,57,52,0.5);
  text-align: center; line-height: 1.5;
  overflow-wrap: anywhere;
}
.drop-preview {
  width: 56px; height: 56px; object-fit: cover;
  border-radius: 2px;
  filter: grayscale(0.4);
  box-shadow: 0 1px 0 rgba(255,255,255,0.75), inset 0 0 0 1px rgba(58,57,52,0.1);
}
.drop-clear {
  position: relative; z-index: 1;
  background: none; border: none; cursor: pointer;
  font-family: var(--serif); font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--stone-mid);
  transition: color 0.25s;
}
.drop-clear:hover { color: var(--accent); }

/* ── timeline: a carved channel with roundels ── */
.tl { position: relative; margin-left: 10px; padding-left: 30px; margin-bottom: 34px; list-style: none; }
.tl::before {
  content: '';
  position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 2px;
  border-left: 1px solid rgba(58,57,52,0.14);
  border-right: 1px solid rgba(255,255,255,0.65);
}
.tl-item { position: relative; margin-bottom: 22px; }
.tl-item::before {
  content: '';
  position: absolute;
  left: -29px; top: 10px;
  transform: translate(-50%, -50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(138,136,127,0.4);
  box-shadow:
    inset 0.5px 1px 1.5px rgba(58,57,52,0.45),
    0 1px 0 rgba(255,255,255,0.75);
}
.tl-item.major::before {
  width: 10px; height: 10px;
  background: rgba(142,91,69,0.55);
  box-shadow:
    inset 1px 1.5px 2px rgba(58,38,28,0.5),
    inset -0.5px -1px 1px rgba(255,255,255,0.25),
    0 1px 0 rgba(255,255,255,0.75);
}
.tl-year {
  font-size: 12.5px; font-weight: 500;
  color: var(--stone-mid);
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
  letter-spacing: 0.04em;
  line-height: 1.2;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.tl-item.major .tl-year { color: var(--accent); }
.tl-text {
  font-size: 14.5px; font-weight: 400;
  color: var(--stone-dark); line-height: 1.6;
  margin-top: 3px;
}
.tl-item.life .tl-text { color: var(--stone-mid); }
.tl-coda {
  display: block; position: relative;
  margin-top: 6px; padding-left: 12px;
  font-size: 12.8px; font-style: italic;
  color: var(--stone-mid); line-height: 1.55;
}
.tl-coda::before {
  content: '';
  position: absolute; left: 0; top: 3px; bottom: 3px;
  width: 2px;
  border-left: 1px solid rgba(58,57,52,0.14);
  border-right: 1px solid rgba(255,255,255,0.65);
}

.tl-src { margin: 46px 0 0 40px; }
.src-lbl {
  display: block;
  font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--stone-mid); opacity: 0.7;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
  line-height: 1.2;
}
.src-list { margin-top: 3px; font-size: 13px; line-height: 1.7; color: var(--stone-mid); }
.src-list > * { display: block; color: var(--stone-mid); text-decoration: none; transition: color 0.3s ease; }
.src-list a:hover { color: var(--accent); }
.src-list cite { font-style: normal; }

/* ── real photographs: prints set into niches cut in the plaster ── */
.r-photos { columns: 2; column-gap: 16px; margin-bottom: 34px; }
.r-photos.one { columns: 1; max-width: 300px; margin-left: auto; margin-right: auto; }
.print {
  break-inside: avoid;
  margin: 0 0 16px;
  padding: 9px;
  border-radius: 3px;
  background: rgba(228,227,222,0.55);
  /* the niche: shadow under its upper-left lip, light on the lower, as the wall is lit */
  box-shadow:
    inset 1px 1.5px 3px rgba(58,57,52,0.16),
    inset -1px -1px 0 rgba(255,255,255,0.65),
    1px 1px 0 rgba(255,255,255,0.7);
}
.print a { display: block; cursor: zoom-in; border-radius: 1px; }
.print a:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 3px; }
.print img {
  display: block; width: 100%; height: auto;
  border: 4px solid #F4F2ED;   /* the white margin of an old print */
  box-shadow: 0 1px 2px rgba(58,57,52,0.14), 0 5px 12px -7px rgba(58,57,52,0.32);
  filter: saturate(0.86);
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1), box-shadow 0.6s ease, filter 0.6s ease;
}
.print a:hover img, .print a:focus-visible img {
  transform: translateY(-2px);
  box-shadow: 0 2px 3px rgba(58,57,52,0.14), 0 12px 22px -12px rgba(58,57,52,0.38);
  filter: saturate(1);
}
.print figcaption {
  margin-top: 9px;
  font-size: 12.5px; font-style: italic; line-height: 1.5;
  color: var(--stone-mid);
  text-align: center;
}
.credit {
  display: block;
  margin-top: 3px;
  font-size: 9.5px; font-style: normal;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--stone-faint);
}

/* ── a print, enlarged: the wall goes soft and the photograph comes forward ── */
#lightbox {
  position: fixed; inset: 0;
  z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 6vh 8vw;
  background: rgba(225,224,219,0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.45s ease;
}
#lightbox[hidden] { display: none; }
#lightbox.show { opacity: 1; }
#lightbox figure {
  display: flex; flex-direction: column; align-items: center;
  max-width: 100%;
  transform: scale(0.96);
  transition: transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
#lightbox.show figure { transform: scale(1); }
.lb-frame {
  padding: 14px;
  border-radius: 4px;
  background: rgba(228,227,222,0.75);
  box-shadow:
    inset 1.5px 2px 4px rgba(58,57,52,0.18),
    inset -1px -1px 0 rgba(255,255,255,0.7),
    1px 1px 0 rgba(255,255,255,0.7);
}
.lb-frame img {
  display: block;
  width: auto; height: auto;
  max-width: min(80vw, 1100px); max-height: 72vh;
  border: 6px solid #F4F2ED;
  box-shadow: 0 2px 4px rgba(58,57,52,0.16), 0 20px 44px -20px rgba(58,57,52,0.45);
}
#lightbox figcaption {
  max-width: 640px;
  margin-top: 18px;
  font-size: 16px; font-style: italic; line-height: 1.6;
  color: var(--stone-dark);
  text-align: center;
}
.lb-count {
  display: block; margin-top: 8px;
  font-size: 11px; font-style: normal; letter-spacing: 0.26em;
  color: var(--stone-faint);
}
.lb-btn {
  position: absolute;
  background: none; border: none; cursor: pointer;
  padding: 12px; line-height: 0;
  color: var(--stone-mid);
  transition: color 0.25s;
}
.lb-btn:hover, .lb-btn:focus-visible { color: var(--accent); }
.lb-btn svg { width: 22px; height: 22px; fill: currentColor; filter: drop-shadow(0 1px 0 rgba(255,255,255,0.8)); }
.lb-close { top: 20px; right: 24px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); }
.lb-prev { left: 2vw; }
.lb-next { right: 2vw; }
#lightbox.single .lb-prev, #lightbox.single .lb-next, #lightbox.single .lb-count { display: none; }

/* ── the full story: set like the intro, folded until asked for ── */
.r-story {
  position: relative;
  max-height: 15.5em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent);
  mask-image: linear-gradient(to bottom, black 55%, transparent);
  transition: max-height 1.1s cubic-bezier(0.22,1,0.36,1);
}
.r-story.open { max-height: none; -webkit-mask-image: none; mask-image: none; }
.r-story h2 {
  font-size: 21px; font-weight: 400; font-style: italic;
  color: rgba(58,57,52,0.85);
  text-align: center;
  line-height: 1.3;
  margin-bottom: 18px;
}
.r-story p, .r-story li {
  font-size: 15px; font-weight: 400;
  color: var(--stone-dark); line-height: 1.8;
  margin-bottom: 14px;
}
.r-story ul { padding-left: 18px; margin-bottom: 14px; }
.r-story li { margin-bottom: 4px; }
.r-story blockquote {
  font-style: italic; font-size: 16px;
  text-align: center; color: var(--stone-dark);
  margin: 6px 0 14px;
}
.r-story a { color: var(--accent); }
/* a name that leads to another life on the wall: underlined in the accent, like an engraved rule */
.r-intro a, .tl-text a, .r-story a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(142,91,69,0.4);
  transition: color 0.25s, border-color 0.25s;
}
.r-intro a:hover, .tl-text a:hover, .r-story a:hover { color: var(--accent); border-color: var(--accent); }

.panel-credit {
  display: block;
  flex-shrink: 0;
  padding: 14px 40px 24px 88px;
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--stone-faint);
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
  transition: color 0.3s;
}
.panel-credit:hover { color: var(--accent); }
#panel.ask .panel-credit { display: none; }

@media (prefers-reduced-motion: reduce) {
  .msg.her .surf { animation: none; opacity: 1; }
  .msg.thinking .dots i { animation: none; opacity: 0.7; }
  #panel, #focus, #veil, .r-story { transition: none; }
}

/* ── large screens: everything reads one size up ── */
@media (min-width: 1280px) {
  :root { --panel-w: 540px; }
  .r-intro { font-size: 17px; }
  .tl-text { font-size: 15.5px; }
  .r-story p, .r-story li { font-size: 16px; }
  .msg.her, .hit .m-snip { font-size: 15px; }
}
@media (min-width: 1600px) {
  :root { --panel-w: 620px; }
  #header .title { font-size: 17px; }
  .hbtn { font-size: 13.5px; }
  .hbtn svg { width: 17px; height: 17px; }
  #panel-label { font-size: 12.5px; }
  .msg.her { font-size: 16px; }
  .msg.you { font-size: 15px; }
  .msg .speaker { font-size: 12.5px; }
  .msg.tip { font-size: 16px; }
  .hit .m-snip { font-size: 16px; }
  #story-input { font-size: 17px; }
  .r-name { font-size: 32px; }
  .r-name .n-sub { font-size: 16px; }
  .r-era { font-size: 12.5px; }
  .r-aka { font-size: 15px; }
  .r-intro { font-size: 18px; }
  .r-quote { font-size: 20px; }
  .r-rule span { font-size: 13.5px; }
  .tl-year { font-size: 15px; }
  .tl-text { font-size: 16.5px; }
  .r-story p, .r-story li { font-size: 17px; }
  .btn-talk { font-size: 14.5px; }
  .btn-talk.in-chat { font-size: 12px; }
  .field label { font-size: 12.5px; }
  .field input, .field textarea { font-size: 17px; }
  .n-main { font-size: 16px; }
  .n-sub { font-size: 11.5px; }
}
/* big screens: the sheet grows and its type takes another step up, so it reads at a glance */
@media (min-width: 1920px) {
  :root { --panel-w: 700px; }
  #panel-head { padding: 80px 56px 16px 100px; }
  #panel-body { padding: 26px 56px 48px 100px; }
  #panel-foot, .panel-credit { padding-left: 100px; padding-right: 56px; }
  #panel-label { font-size: 13.5px; }
  .msg.her, .hit .m-snip { font-size: 17.5px; }
  .msg.you { font-size: 16.5px; }
  .msg .speaker { font-size: 13px; }
  .msg.tip { font-size: 17px; }
  .hit .m-name { font-size: 28px; }
  .hit .m-era { font-size: 12.5px; }
  #story-input { font-size: 18px; }
  .sg-name { font-size: 17.5px; }
  .sg-sub { font-size: 11px; }
  .r-name { font-size: 37px; }
  .r-name .n-sub { font-size: 17px; }
  .r-era { font-size: 13.5px; }
  .r-aka { font-size: 16.5px; }
  .r-intro { font-size: 19.5px; }
  .r-quote { font-size: 22px; }
  .r-rule { max-width: 280px; }
  .r-rule span { font-size: 14.5px; }
  .tl-year { font-size: 16px; }
  .tl-text { font-size: 18px; }
  .tl-coda { font-size: 14.5px; }
  .src-list { font-size: 15px; }
  .src-lbl { font-size: 12px; }
  .r-story h2 { font-size: 25px; }
  .r-story p, .r-story li { font-size: 18.5px; }
  .r-story blockquote { font-size: 19px; }
  .btn-talk { font-size: 15.5px; }
  .field label { font-size: 13.5px; }
  .field input, .field textarea { font-size: 18px; }
  .panel-credit { font-size: 12.5px; }
  .r-photos.one { max-width: 380px; }
  .r-cats { font-size: 12px; }
  .print figcaption { font-size: 14px; }
  .credit { font-size: 10.5px; }
}
@media (min-width: 2400px) {
  :root { --panel-w: 780px; }
}

/* ── mobile: panel from the bottom, compact header ── */
@media (max-width: 768px) {
  :root { --panel-w: 100vw; }

  #header {
    width: 100%;
    padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 18px max(16px, env(safe-area-inset-left));
    column-gap: 12px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  #header .title { font-size: 13px; letter-spacing: 0.18em; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .hgroup { width: auto; gap: 20px; flex-shrink: 0; }
  .views { display: none; }
  .views-icon { display: inline-flex; }
  .hbtn { font-size: 10px; letter-spacing: 0.12em; gap: 4px; padding: 4px 0; }
  .hbtn .label { display: none; }
  .hbtn svg { width: 19px; height: 19px; }

  #panel {
    top: auto;
    bottom: 0; left: 0; right: 0;
    width: 100vw;
    height: 82vh;
    height: 82dvh;
    bottom: var(--kb, 0px);
    max-height: calc(100dvh - var(--kb, 0px) - 8px);
    transition: transform 1.05s cubic-bezier(0.22,1,0.36,1), height 0.6s ease, bottom 0.25s ease;
    border-radius: 18px 18px 0 0;
    transform: translateY(105%);
    background: rgba(232,231,226,0.98);
    -webkit-mask-image: none;
    mask-image: none;
    box-shadow: 0 -4px 30px rgba(0,0,0,0.08);
  }
  #panel.open { transform: translateY(0); }
  #panel::after { -webkit-mask-image: none; mask-image: none; }
  #panel-haze { display: none; }   /* the sheet is solid here */
  .r-photos { column-gap: 10px; }
  .print { padding: 6px; margin-bottom: 10px; }
  .print img { border-width: 3px; }
  #lightbox { padding: 64px 10px 96px; }
  .lb-frame { padding: 8px; }
  .lb-frame img { max-width: calc(100vw - 40px); max-height: 66vh; max-height: 66dvh; }
  #lightbox figcaption { font-size: 14px; padding: 0 8px; }
  .lb-prev, .lb-next { top: auto; bottom: max(18px, env(safe-area-inset-bottom)); transform: none; }
  .lb-prev { left: 24vw; }
  .lb-next { right: 24vw; }
  .lb-close { top: max(12px, env(safe-area-inset-top)); right: 10px; }

  #panel-head { position: relative; padding: 18px 16px 10px 20px; touch-action: none; }
  /* a grab handle, cut into the sheet the way the wall's rules are */
  #panel-head::before {
    content: ''; position: absolute;
    top: 7px; left: 50%;
    width: 38px; height: 4px; margin-left: -19px;
    border-radius: 2px;
    background: rgba(58,57,52,0.12);
    box-shadow: inset 0 1px 1px rgba(58,57,52,0.16), 0 1px 0 rgba(255,255,255,0.75);
  }
  #panel-body { padding: 12px 16px 30px 20px; }
  #panel-foot { padding: 10px 16px max(24px, calc(env(safe-area-inset-bottom) + 12px)) 20px; }
  .panel-credit { padding: 10px 16px max(20px, calc(env(safe-area-inset-bottom) + 10px)) 20px; }

  /* while a portrait is forward, the sheet stops lower so the face stays in view above
     it; reading further down a life lets the sheet rise to its full height */
  #focus.show ~ #panel:not(.tall) { height: 64vh; height: 64dvh; }
  #focus {
    left: 50%;
    top: 21vh; top: 21dvh;
    width: min(34vh, 72vw); width: min(34dvh, 72vw);
    height: min(34vh, 72vw); height: min(34dvh, 72vw);
  }

  /* narrow tiles: a long name takes a second line, a long calling is shortened */
  .tile-name { bottom: 8px; padding: 0 10px; }
  .n-main { font-size: 11px; letter-spacing: 0.18em; line-height: 1.35; }
  .n-sub { font-size: 8px; letter-spacing: 0.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .msg.her { font-size: 13.5px; }
  .msg.you { font-size: 12.5px; padding-left: 20px; }
  .msg .speaker { font-size: 10.5px; }
  #story-input { font-size: 15px; min-height: 44px; }

  .r-name { font-size: 22px; }
  .r-name .n-sub { font-size: 12px; }
  .r-intro { font-size: 14.5px; }
  .r-quote { font-size: 15.5px; padding: 2px 8px; }
  .tl-year { font-size: 12.5px; }
  .tl-text { font-size: 13px; }
  .r-story p, .r-story li { font-size: 14px; }
  .tl-src { margin-left: 0; }

  .wall-static { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 50vw; padding-top: 60px; }
}

/* ── touch screens: phones and tablets, whatever their width ── */
/* there is no hover to reveal a name, so every name stays engraved under its portrait */
@media (hover: none) {
  .tile .tile-name { opacity: 0.85; }
}
@media (pointer: coarse) {
  /* 16px or more, or iOS zooms the page when a field is touched */
  #story-input, .field input, .field textarea { font-size: 16px; }
  /* fingertip-sized hit areas around the same small icons */
  .hbtn, #panel-x, .btn-talk.in-chat { position: relative; }
  .hbtn::after, #panel-x::after, #send-btn::after, .btn-talk.in-chat::after { content: ''; position: absolute; }
  .hbtn::after { inset: -12px -10px; }
  .views::after { content: none; }   /* its two words are links of their own; an overlay would cover them */
  #panel-x::after { inset: -14px; }
  #send-btn::after { inset: -8px; }
  .btn-talk.in-chat::after { inset: -9px -4px; }
}

/* ── the index: a plain, scrolling page of every name ── */
/* only the page itself scrolls here: a scrolling body would be a second, empty
   scroller, and the site-wide overscroll-behavior: none would stop the wheel
   or finger from handing the scroll on to the page */
body.index-page { overflow: visible; height: auto; }
html:has(body.index-page) { overflow: auto; height: auto; }
.index {
  max-width: 980px;
  margin: 0 auto;
  padding: 120px 24px 80px;
}
.index h1 {
  font-size: 34px; font-weight: 400;
  color: rgba(58,57,52,0.85);
  text-shadow: 0 1px 0 rgba(255,255,255,0.75);
  text-align: center;
}
.index .lede {
  font-size: 17px; font-weight: 300; line-height: 1.8;
  color: var(--stone-dark);
  text-align: center;
  max-width: 620px; margin: 14px auto 0;
}
.index-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 10px; }
/* each entry is a tile of its own, joined to its neighbours by the same hairline seam */
.index-list li { background: var(--plaster); box-shadow: 0 0 0 0.5px var(--grout), inset 0 1px 0 rgba(255,255,255,0.35); }
.index-list a { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 14px 18px 14px 8px; text-decoration: none; }
.index-list .thumb { position: relative; width: 96px; height: 96px; }
.index-list .i-name, .index-list .i-meta { display: block; }
.index-list .i-name { font-size: 19px; color: var(--stone-dark); line-height: 1.2; transition: color 0.3s; }
.index-list a:hover .i-name { color: var(--accent); }
.index-list .i-meta { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone-mid); margin-top: 5px; line-height: 1.5; }
.index-cat { margin-top: 10px; }
.index section { scroll-margin-top: 96px; }
html:has(body.index-page) { scroll-behavior: smooth; }
/* the sections, each a way down the page, with how many lives each holds */
.index-nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 22px;
  max-width: 760px;
  margin: 30px auto 6px;
}
.index-nav a {
  font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--stone-mid);
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
  transition: color 0.25s;
}
.index-nav a:hover { color: var(--accent); }
.index-nav span { margin-left: 6px; color: var(--stone-faint); letter-spacing: 0.06em; }
.index-cat:first-of-type { margin-top: 20px; }
.index-foot { text-align: center; margin-top: 60px; font-size: 13px; color: var(--stone-mid); line-height: 1.9; }
.index-foot a { color: var(--stone-mid); transition: color 0.3s; }
.index-foot a:hover { color: var(--accent); }