/* ==========================================================================
   THE GHOST CLAN — stylesheet
   Palette: twilight base, ember (ginger) + moonlight (cool) accents.
   Type: Fraunces (display), Inter (body), Space Mono (taxonomy tags).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,900&family=Inter:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root {
  --ink:      #14161f;   /* deep twilight base            */
  --ink-2:    #1b1e2b;   /* raised panels / cards         */
  --ink-3:    #23273697; /* hover / translucent lift      */
  --hair:     #33384a;   /* hairline borders              */
  --mist:     #e9e7df;   /* primary text (warm off-white) */
  --moon:     #a6b0c4;   /* secondary text / cool accent  */
  --moon-dim: #6f7890;   /* tertiary text                 */
  --ember:    #d98a4a;   /* warm ginger accent            */
  --ember-lo: #e7a870;

  /* status colors */
  --st-active:    #7fae7a;
  --st-wandering: #d6a24c;
  --st-mia:       #7f8db0;
  --st-departed:  #a99bc0;

  --maxw: 1180px;
  --radius: 14px;
  --shadow: 0 18px 50px -22px rgba(0,0,0,.75);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(120% 65% at 50% -8%, #232840 0%, rgba(35,40,64,0) 55%),
    var(--ink);
  color: var(--mist);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

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

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 26px; }

/* ---- the clan glyph (a small four-point star used as a motif) ---------- */
.glyph {
  display: inline-block;
  width: .62em; height: .62em;
  background: currentColor;
  -webkit-mask: var(--star) center/contain no-repeat;
          mask: var(--star) center/contain no-repeat;
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C52 30 70 48 100 50 70 52 52 70 50 100 48 70 30 52 0 50 30 48 48 30 50 0Z' fill='black'/%3E%3C/svg%3E");
  vertical-align: baseline;
}

/* ==========================  HEADER / NAV  =============================== */
.site-head {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(10px);
  background: linear-gradient(to bottom, rgba(20,22,31,.92), rgba(20,22,31,.6));
  border-bottom: 1px solid var(--hair);
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 15px; padding-bottom: 15px;
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand .glyph { color: var(--ember); width: 15px; height: 15px; }
.brand b {
  font-family: 'Fraunces', serif;
  font-weight: 600; font-size: 1.16rem; letter-spacing: .2px;
}
.brand span { color: var(--moon-dim); font-size: .8rem; }
.nav { display: flex; gap: 26px; }
.nav a {
  font-size: .82rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--moon); padding: 4px 0; position: relative;
  transition: color .2s;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--mist); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  background: var(--ember);
}

/* ==============================  HERO  ================================== */
.hero { padding: 82px 0 30px; }
.hero .eyebrow {
  font-family: 'Space Mono', monospace; font-size: .78rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ember);
  display: flex; align-items: center; gap: 10px; margin-bottom: 22px;
}
.hero h1 {
  font-family: 'Fraunces', serif;
  font-weight: 900; font-size: clamp(2.9rem, 8vw, 5.6rem);
  line-height: .98; letter-spacing: -.5px; margin: 0 0 24px;
  max-width: 14ch;
}
.hero h1 em { font-style: italic; font-weight: 500; color: var(--ember-lo); }
.hero .thesis {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--moon);
  max-width: 56ch; margin: 0;
}
.hero .meta {
  margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-family: 'Space Mono', monospace; font-size: .8rem; color: var(--moon-dim);
}
.hero .meta b { color: var(--mist); font-weight: 400; }

/* ==========================  WHO WE ARE  ================================ */
.about-band {
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  margin: 46px 0 0; padding: 40px 0;
  background: linear-gradient(180deg, rgba(35,40,64,.16), transparent);
}
.about-band .wrap { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; }
.about-band h2 {
  font-family: 'Fraunces', serif; font-weight: 500; font-style: italic;
  font-size: 1.5rem; margin: 0; color: var(--mist);
}
.about-band p { margin: 0; color: var(--moon); font-size: 1.05rem; }

/* legend of statuses */
.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 22px; }
.legend .item {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Space Mono', monospace; font-size: .74rem;
  color: var(--moon-dim); letter-spacing: .04em;
}

/* ==========================  ROSTER SECTIONS  =========================== */
.section { padding: 58px 0 12px; }
.section-head { margin-bottom: 30px; }
.section-head .count {
  font-family: 'Space Mono', monospace; font-size: .78rem; color: var(--ember);
  letter-spacing: .12em;
}
.section-head h2 {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.7rem,4vw,2.4rem);
  margin: 8px 0 6px; letter-spacing: -.3px;
}
.section-head p { margin: 0; color: var(--moon-dim); max-width: 60ch; }

/* ==============================  GRID  ================================== */
.grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}

/* ==============================  CARD  ================================== */
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--ink-2); border: 1px solid var(--hair);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s, box-shadow .28s;
}
.card:hover {
  transform: translateY(-5px);
  border-color: #4a5170;
  box-shadow: var(--shadow);
}
.card .frame { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #0f1119; }
.card .frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.2,1); filter: saturate(1.02);
}
.card:hover .frame img { transform: scale(1.05); }
.card .frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,17,25,.6), transparent 42%);
}

.card .body { padding: 14px 16px 17px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card .name-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.card .name {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.28rem;
  line-height: 1; letter-spacing: -.2px;
}
.card .blurb { color: var(--moon); font-size: .9rem; line-height: 1.5; margin: 0; flex: 1; }

/* the taxonomy tag — echoes the photo filename convention */
.tag {
  font-family: 'Space Mono', monospace; font-size: .68rem;
  color: var(--moon-dim); letter-spacing: .02em;
  border-top: 1px solid var(--hair); padding-top: 10px; margin-top: 2px;
  display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center;
}
.tag .sep { opacity: .4; }
.tag .needs { color: var(--ember); }

/* mascot ribbon */
.mascot-badge {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  font-family: 'Space Mono', monospace; font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink);
  background: var(--ember); padding: 4px 9px; border-radius: 20px;
  display: inline-flex; align-items: center; gap: 5px; font-weight: 700;
}

/* ============================  STATUS  ================================= */
.status {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  font-family: 'Space Mono', monospace; font-size: .66rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--moon);
}
.status .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--moon-dim);
  position: relative; flex-shrink: 0;
}
.status.active    .dot { background: var(--st-active); }
.status.wandering .dot { background: var(--st-wandering); }
.status.mia       .dot { background: var(--st-mia); }
.status.departed  .dot { background: var(--st-departed); }

/* gentle pulse for cats that are out and about */
.status.active .dot::after,
.status.wandering .dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid currentColor; color: inherit;
  animation: pulse 2.6s ease-out infinite; opacity: 0;
}
.status.active .dot::after    { border-color: var(--st-active); }
.status.wandering .dot::after { border-color: var(--st-wandering); }
@keyframes pulse {
  0%   { transform: scale(.6); opacity: .8; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* departed cats: a soft, respectful treatment on their card */
.card.is-departed .frame img { filter: grayscale(.7) brightness(.82); }
.card.is-departed .frame::after {
  background: linear-gradient(to top, rgba(15,17,25,.72), rgba(20,22,31,.15));
}

/* =====================  PROFILE PAGE  ================================== */
.profile { padding: 40px 0 40px; }
.back {
  font-family: 'Space Mono', monospace; font-size: .76rem; color: var(--moon-dim);
  letter-spacing: .05em; display: inline-flex; gap: 8px; align-items: center;
  margin-bottom: 26px; transition: color .2s;
}
.back:hover { color: var(--mist); }

.profile-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 46px; align-items: start; }

.hero-photo {
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hair);
  background: #0f1119; box-shadow: var(--shadow); position: relative;
}
.hero-photo img { width: 100%; height: auto; }
.hero-photo.is-departed img { filter: grayscale(.6) brightness(.85); }

.profile .name-block .kicker {
  font-family: 'Space Mono', monospace; font-size: .76rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ember); display: flex; align-items: center; gap: 9px;
}
.profile h1 {
  font-family: 'Fraunces', serif; font-weight: 900; font-size: clamp(2.6rem, 6vw, 4rem);
  line-height: .95; letter-spacing: -.5px; margin: 14px 0 18px;
}
.profile .status.big { font-size: .78rem; }
.profile .status.big .dot { width: 11px; height: 11px; }

.data-list {
  margin: 26px 0; padding: 22px 0; border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 20px;
}
.data-list .k {
  font-family: 'Space Mono', monospace; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--moon-dim); margin-bottom: 4px;
}
.data-list .v { font-size: 1.02rem; color: var(--mist); }

.about-head {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 500;
  font-size: 1.35rem; margin: 0 0 12px; color: var(--mist);
}
.about-body { color: var(--moon); font-size: 1.06rem; margin: 0; }

.needs-note {
  margin-top: 20px; padding: 12px 15px; border-radius: 10px;
  background: rgba(217,138,74,.1); border: 1px solid rgba(217,138,74,.35);
  font-family: 'Space Mono', monospace; font-size: .78rem; color: var(--ember-lo);
  line-height: 1.5;
}

/* memorial line for departed cats */
.memorial {
  margin-top: 22px; font-family: 'Fraunces', serif; font-style: italic;
  color: var(--st-departed); font-size: 1.05rem;
  display: flex; align-items: center; gap: 10px;
}

/* profile mini-gallery */
.mini-gallery { margin-top: 30px; }
.mini-gallery h3 {
  font-family: 'Space Mono', monospace; font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--moon-dim); margin: 0 0 14px;
}
.mini-gallery .strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mini-gallery img { aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--hair); }
.mini-gallery .empty {
  font-size: .9rem; color: var(--moon-dim); font-style: italic;
}

/* prev / next */
.pager {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 50px; padding-top: 26px; border-top: 1px solid var(--hair);
}
.pager a { display: flex; flex-direction: column; gap: 4px; max-width: 45%; transition: color .2s; }
.pager a:hover { color: var(--ember-lo); }
.pager .lbl { font-family: 'Space Mono', monospace; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--moon-dim); }
.pager .who { font-family: 'Fraunces', serif; font-size: 1.25rem; font-weight: 600; }
.pager a.next { text-align: right; margin-left: auto; align-items: flex-end; }

/* =====================  GALLERY PAGE  ================================== */
.gallery-page { padding: 46px 0; }
.masonry { columns: 4 240px; column-gap: 16px; }
.masonry a {
  display: block; break-inside: avoid; margin-bottom: 16px; position: relative;
  border-radius: 12px; overflow: hidden; border: 1px solid var(--hair);
  background: #0f1119;
}
.masonry img { width: 100%; height: auto; transition: transform .5s, filter .3s; }
.masonry a:hover img { transform: scale(1.04); }
.masonry a::after {
  content: attr(data-name); position: absolute; left: 12px; bottom: 10px;
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.05rem; color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.9); opacity: 0; transform: translateY(6px);
  transition: opacity .3s, transform .3s;
}
.masonry a:hover::after { opacity: 1; transform: translateY(0); }
.masonry a .g-status {
  position: absolute; top: 10px; right: 10px; width: 10px; height: 10px;
  border-radius: 50%; border: 2px solid rgba(15,17,25,.7);
}

/* ==============================  FOOTER  =============================== */
.site-foot {
  border-top: 1px solid var(--hair); margin-top: 70px; padding: 34px 0 50px;
  color: var(--moon-dim); font-size: .86rem;
}
.site-foot .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.site-foot .glyph { color: var(--ember); }

/* ==============================  MOTION  =============================== */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }

/* ==============================  RESPONSIVE  =========================== */
@media (max-width: 820px) {
  .about-band .wrap { grid-template-columns: 1fr; gap: 20px; }
  .profile-grid { grid-template-columns: 1fr; gap: 28px; }
  .nav { gap: 18px; }
  .brand span { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero { padding: 56px 0 20px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .data-list { grid-template-columns: 1fr; }
  .nav a { font-size: .74rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card:hover { transform: none; }
  .card:hover .frame img { transform: none; }
}

/* keyboard focus */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 4px;
}

/* ==========================================================================
   GROVECLAN ADDITIONS — clan names, ranks, TNR, placeholders, lineage, memorial
   ========================================================================== */

:root { --st-adopted: #6bb0a0; }   /* forever-home teal */
.status.adopted .dot { background: var(--st-adopted); }
.g-status { } /* color set inline */

/* clan name subtitle on cards */
.card .clan-name {
  font-family: 'Space Mono', monospace; font-size: .7rem; letter-spacing: .02em;
  color: var(--ember-lo); margin-top: -3px;
}

/* the "awaiting TNR" inline tag */
.tag .tnr { color: var(--ember); }

/* rank flag (corner ribbon on colony leaders) */
.rank-flag {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  font-family: 'Space Mono', monospace; font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; padding: 4px 9px; border-radius: 20px;
  display: inline-flex; align-items: center; gap: 5px; color: var(--ink);
}
.rank-flag.leader       { background: #e6c15a; }   /* gold  */
.rank-flag.deputy       { background: #b9c2d6; }   /* silver */
.rank-flag.medicine-cat { background: #93c08a; }   /* green  */
/* if a cat is both mascot and ranked, nudge the mascot badge down */
.card .mascot-badge + .rank-flag { top: 44px; }

/* placeholder (no photo) */
.frame.no-photo {
  display: flex !important; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; background:
    radial-gradient(120% 90% at 50% 25%, #262a3a 0%, #171a24 70%);
}
.frame.no-photo .silhouette { width: 46%; }
.frame.no-photo .silhouette svg { width: 100%; height: auto; opacity: .5; color: #454d68; }
.frame.no-photo .no-photo-label {
  font-family: 'Space Mono', monospace; font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--moon-dim);
}
.frame.no-photo::after { display: none; }
.card-nophoto:hover .silhouette svg { color: var(--ember); opacity: .7; transition: color .3s, opacity .3s; }

/* memorial teaser strip on the home page */
.memorial-teaser { padding-top: 20px; }
.memorial-teaser .mt-inner {
  border: 1px solid var(--hair); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(169,155,192,.08), transparent);
  padding: 26px 28px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.memorial-teaser .glyph { color: var(--st-departed); }
.memorial-teaser p { margin: 0; color: var(--moon); flex: 1; min-width: 240px; }
.mt-link {
  font-family: 'Space Mono', monospace; font-size: .8rem; color: var(--st-departed);
  letter-spacing: .04em; white-space: nowrap;
}
.mt-link:hover { color: var(--mist); }

/* ---- profile: clan line, status row, TNR flag ---- */
.clan-line {
  font-family: 'Fraunces', serif; font-style: italic; font-size: 1.35rem;
  color: var(--ember-lo); margin: -8px 0 16px; display: flex; align-items: center; gap: 12px;
}
.status-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rank-chip {
  font-family: 'Space Mono', monospace; font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  color: var(--ink); display: inline-flex; align-items: center; gap: 5px;
}
.rank-chip.leader { background: #e6c15a; } .rank-chip.deputy { background: #b9c2d6; }
.rank-chip.medicine-cat { background: #93c08a; }
.tnr-flag {
  font-family: 'Space Mono', monospace; font-size: .66rem; letter-spacing: .06em;
  color: var(--ember-lo); border: 1px solid rgba(217,138,74,.4); border-radius: 20px;
  padding: 4px 11px; display: inline-flex; align-items: center; gap: 6px;
}
.hero-photo.no-photo {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; aspect-ratio: 4/5;
  background: radial-gradient(120% 90% at 50% 25%, #262a3a 0%, #171a24 70%);
}
.hero-photo.no-photo .silhouette svg { width: 42%; opacity: .5; color: #454d68; }
.hero-photo.no-photo .no-photo-label {
  font-family: 'Space Mono', monospace; font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--moon-dim);
}

/* ---- profile: family / lineage ---- */
.family { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hair); }
.family h3, .mini-gallery h3 {
  font-family: 'Space Mono', monospace; font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--moon-dim); margin: 0 0 14px;
}
.fam-row { display: flex; align-items: baseline; gap: 16px; margin-bottom: 10px; }
.fam-row .k, .fam-kittens .k {
  font-family: 'Space Mono', monospace; font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--moon-dim); width: 74px; flex-shrink: 0;
}
.fam-link { display: inline-flex; align-items: center; gap: 8px; color: var(--mist); transition: color .2s; }
.fam-link:hover { color: var(--ember-lo); }
.fam-clan { font-family: 'Space Mono', monospace; font-size: .74rem; color: var(--moon-dim); }
.fam-kittens { display: flex; gap: 16px; margin-top: 6px; }
.kit-list { display: flex; flex-wrap: wrap; gap: 8px; }
.kit {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
  border: 1px solid var(--hair); border-radius: 20px; font-size: .88rem;
  color: var(--mist); transition: border-color .2s, color .2s;
}
.kit:hover { border-color: #4a5170; color: var(--ember-lo); }
.kit .kstatus { font-family: 'Space Mono', monospace; font-size: .6rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--moon-dim); }
.kdot { width: 8px; height: 8px; border-radius: 50%; background: var(--moon-dim); flex-shrink: 0; }
.kdot.active { background: var(--st-active); } .kdot.wandering { background: var(--st-wandering); }
.kdot.mia { background: var(--st-mia); } .kdot.departed { background: var(--st-departed); }
.kdot.adopted { background: var(--st-adopted); }

.mia-note {
  margin-top: 22px; font-family: 'Fraunces', serif; font-style: italic;
  color: var(--st-mia); font-size: 1.02rem; display: flex; align-items: center; gap: 10px;
}
.mia-note .glyph, .memorial .glyph { color: currentColor; }

/* ==========================================================================
   MEMORIAL PAGE
   ========================================================================== */
.memorial-page { padding: 30px 0 20px; }

.seven {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  padding: 40px 0 50px; border-bottom: 1px solid var(--hair);
}
.seven-head .glyph { color: var(--st-departed); width: 20px; height: 20px; }
.seven-head h2 {
  font-family: 'Fraunces', serif; font-weight: 900; font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1; margin: 14px 0 18px; letter-spacing: -.5px;
}
.seven-head p { color: var(--moon); margin: 0 0 20px; font-size: 1.05rem; max-width: 46ch; }
.seven-link {
  font-family: 'Space Mono', monospace; font-size: .8rem; color: var(--st-departed);
  letter-spacing: .04em;
}
.seven-link:hover { color: var(--mist); }
.seven-list {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--hair); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(169,155,192,.07), transparent);
  overflow: hidden;
}
.seven-list li {
  display: flex; align-items: center; gap: 14px; padding: 15px 22px;
  border-bottom: 1px solid var(--hair);
}
.seven-list li:last-child { border-bottom: none; }
.seven-list .glyph { color: var(--st-departed); width: 11px; height: 11px; flex-shrink: 0; }
.seven-list .kn { font-family: 'Fraunces', serif; font-size: 1.25rem; font-weight: 600; }
.seven-list .kc { margin-left: auto; color: var(--moon-dim); font-size: .9rem; font-style: italic; }

.gone-more { padding: 44px 0; border-bottom: 1px solid var(--hair); }
.gone-more h3, .missing h3 {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.5rem; margin: 0 0 22px;
}
.missing { padding: 44px 0 20px; }
.missing .glyph { color: var(--st-mia); }
.missing-copy { color: var(--moon-dim); margin: 0 0 20px; max-width: 60ch; }
.missing-list { display: flex; flex-wrap: wrap; gap: 10px; }
.miss {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px;
  border: 1px solid var(--hair); border-radius: 22px; transition: border-color .2s, color .2s;
}
.miss:hover { border-color: #4a5170; color: var(--st-mia); }
.miss .mn { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.05rem; }
.miss .mc { font-family: 'Space Mono', monospace; font-size: .7rem; color: var(--moon-dim); }

@media (max-width: 720px) {
  .seven { grid-template-columns: 1fr; gap: 26px; }
}