/* ===== Home / essays index ==================================================
   Scoped to .home-page. A dark cover-wall hero with the headline printed over
   it, then the essays as an index: title, one line, a hairline between. No
   section label, no numerals, no plates. The ranking tool and the game are
   never advertised here; they are reached from inside an essay.
   Tokens + fonts come from site.css (Bodoni Moda + Libre Franklin). */

.home-page{overflow-x:clip}
.home-page #grain{opacity:.05}

.home-page .kicker{font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:inherit;opacity:.72;margin:0 0 20px}

/* =========================================================================
   HERO: album art as a wall, the headline printed over it
   ========================================================================= */
.home-hero{position:relative;min-height:min(84vh,880px);display:grid;align-items:end;
  background:#0a0a0a;color:#f4f2ec;overflow:hidden;isolation:isolate}
.home-hero .hh-wall{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);z-index:-2}
.home-hero .hh-wall .w{background:var(--art) center/cover no-repeat;
  filter:grayscale(1) contrast(1.12) brightness(.82);transform:scale(1.04);transition:filter 1.2s ease}
.home-hero .hh-wall .w:nth-child(2){filter:grayscale(.15) contrast(1.1) brightness(.72)}
.home-hero .hh-shade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,10,10,.4) 0%,rgba(10,10,10,.15) 34%,rgba(10,10,10,.94) 100%)}
.home-hero .kicker{color:#dedcd5;opacity:1;font-size:12px}
.home-hero .wrap{position:relative;width:100%;padding-top:24vh;padding-bottom:clamp(40px,7vh,72px)}
.home-hero h1{font-size:clamp(56px,11vw,180px);line-height:.9;max-width:11ch;color:#f4f2ec;letter-spacing:-.018em}
.home-hero h1 em{font-style:italic;font-weight:400}
.home-hero .lede{font-family:var(--fb);font-weight:300;font-size:clamp(17px,1.6vw,22px);line-height:1.45;
  max-width:48ch;color:#dedcd5;margin:28px 0 0}
@media (max-width:700px){
  .home-hero .hh-wall{grid-template-columns:repeat(3,1fr)}
  .home-hero .hh-wall .w:nth-child(n+4){display:none}
  .home-hero .wrap{padding-top:20vh}
}

/* =========================================================================
   THE INDEX: title, one line, a hairline between
   ========================================================================= */
.essays-index{padding:clamp(56px,9vh,120px) 0 clamp(64px,10vh,120px)}
.ei-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.ei-list li{border-bottom:1px solid var(--rule)}
.ei-list li:last-child{border-bottom:0}
.ei-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:clamp(18px,3vw,44px);padding:clamp(26px,4vh,46px) 0;text-decoration:none;color:inherit;
  transition:padding-left .3s cubic-bezier(.2,.7,.2,1)}
.ei-list a:hover{padding-left:clamp(8px,1.4vw,18px)}
.ei-t{min-width:0}
.ei-t b{display:block;font-family:var(--fd);font-weight:400;line-height:1.04;letter-spacing:-.01em;
  font-size:clamp(30px,4.6vw,66px);color:var(--ink);text-wrap:balance}
.ei-t small{display:block;font-family:var(--fb);font-size:clamp(14px,1.15vw,16px);line-height:1.5;
  color:var(--ink-2);margin-top:12px;max-width:56ch}
.ei-arrow{font-family:var(--fd);font-size:clamp(24px,2.4vw,34px);color:var(--ink-3);
  transform:translateX(-6px);opacity:0;transition:opacity .3s,transform .3s,color .3s}
.ei-list a:hover .ei-arrow{opacity:1;transform:translateX(0);color:var(--ink)}
@media (max-width:640px){.ei-arrow{display:none}}

/* ---------- 404 ---------- */
.notfound .nf{min-height:72vh;display:grid;align-content:center;padding:80px 0}
.notfound .nf h1{font-family:var(--fd);font-weight:400;font-size:clamp(34px,5.4vw,68px);line-height:1.02;
  letter-spacing:-.012em;margin:0;max-width:16ch}
.notfound .nf .kicker{color:var(--ink-3)}
.notfound .nf .lede{font-size:clamp(16px,1.4vw,19px);color:var(--ink-2);max-width:46ch;margin:22px 0 0}
.nf-links{display:flex;gap:26px;flex-wrap:wrap;margin:30px 0 0;font-family:var(--fm);font-size:12px;
  letter-spacing:.06em;text-transform:uppercase}
.nf-links a{text-decoration:none;border-bottom:1px solid var(--rule-2);padding-bottom:3px}
.nf-links a:hover{border-bottom-color:var(--ink)}

/* ---------- footer ---------- */
.home-foot{padding:38px 0 72px;font-family:var(--fm);font-size:11.5px;color:var(--ink-3);
  line-height:1.6;border-top:1px solid var(--rule)}
.home-foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}