/* ============================================================
   APP ARCHIVE INDEX  (/apps/index.html only)
   Layered on top of style.css: reuses its tokens, navbar,
   grain and type system. Self-contained, no dependency on the
   homepage JS (main.js / menu.js). The Reaction detail, privacy
   and support pages all use the shared .case_* layout from
   style.css instead of anything here.
   ============================================================ */

.apps-page{
  background:var(--beige-100);
  color:var(--black-400);
  font-family:var(--font-default);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;flex-direction:column;
}
.apps-page main{flex:1 0 auto}

.app_wrap{
  max-width:72rem;margin:0 auto;
  padding:0 var(--site-margin);
}

/* ---------- archive index (editorial list) ---------- */
/* default font, lowercase title, no all-caps anywhere — per the user's ask */
.arch_top{padding:var(--space-page-top) 0 clamp(2rem,4vw,3.25rem)}
.arch_eyebrow{
  display:inline-flex;align-items:center;gap:.55em;
  color:var(--black-100);font-size:.95rem;font-weight:500;margin-bottom:1rem;
}
.arch_dot{
  width:.42em;height:.42em;border-radius:50%;background:var(--olive);flex:0 0 auto;
  outline:3px solid rgba(226,226,172,.35);
}
.arch_title{
  font-family:var(--font-default);font-weight:650;
  font-size:clamp(2.8rem,9vw,6rem);line-height:.88;letter-spacing:-.05em;
}
.arch_lede{
  margin-top:1.25rem;max-width:38rem;
  font-size:var(--text-h5);line-height:1.5;color:var(--black-100);
}

/* big-icon editorial rows */
.arch_list{display:flex;flex-direction:column;padding-bottom:var(--space-section-lg)}
.arch_row{
  display:flex;align-items:center;gap:clamp(1rem,3vw,2rem);
  padding:clamp(1.25rem,2.5vw,1.9rem) .1rem;
  border-top:1px solid var(--beige-400);
  transition:padding-left .4s cubic-bezier(.16,1,.3,1);
}
.arch_row:last-child{border-bottom:1px solid var(--beige-400)}
.arch_row:hover{padding-left:.9rem}
.arch_row:hover .arch_name{color:var(--black-200)}
.arch_row:hover .arch_ar{transform:translateX(.5rem)}
.arch_num{width:2.2ch;flex:0 0 auto;color:var(--black-50);font-size:.85rem;font-weight:500}
.arch_ico{
  width:96px;height:96px;border-radius:23%;flex:0 0 auto;
  box-shadow:0 4px 16px rgba(0,0,0,.12);
}
.arch_name{
  flex:1;min-width:0;font-weight:600;letter-spacing:-.045em;line-height:1;
  font-size:clamp(1.7rem,4.6vw,3rem);transition:color .3s;
}
.arch_tag{color:var(--black-100);font-size:.98rem;line-height:1.4;max-width:26ch;text-align:right}
.arch_ar{
  flex:0 0 auto;color:var(--black-50);font-size:1.35rem;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
@media(max-width:640px){
  .arch_row{flex-wrap:wrap;gap:1rem}
  .arch_num{display:none}
  .arch_ar{display:none}
  .arch_ico{width:64px;height:64px}
  .arch_name{font-size:1.5rem}
  .arch_tag{flex-basis:100%;text-align:left;max-width:none;margin-top:.1rem}
}

/* slim footer for the archive index page */
.foot_slim{
  border-top:1px solid var(--beige-400);
  padding:2rem var(--site-margin);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  color:var(--black-100);font-size:var(--text-small);
}
.foot_slim a{transition:color .3s}
.foot_slim a:hover{color:var(--black-400)}
.foot_slim_links{display:flex;gap:1.5rem;flex-wrap:wrap}