/* ═══ hub — the index of mini apps. Own tokens, own file, no dependency
   on any app's CSS. Each app is a separate document, so nothing here
   reaches them and nothing of theirs reaches this. ═══ */
@font-face{font-family:"Newsreader";src:url("../fonts/Newsreader-normal.woff2") format("woff2");
  font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../fonts/Newsreader-italic.woff2") format("woff2");
  font-weight:200 800;font-style:italic;font-display:swap}

:root{
  --paper:#F7F4EE; --ink:#12161A; --muted:rgba(18,22,26,.58);
  --rule:rgba(18,22,26,.14); --brass:#8A6A2F;
  --gut:clamp(22px,5.4vw,84px);
  --disp:"Newsreader",Georgia,serif;
  --sans:ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font-family:var(--disp);font-size:clamp(17px,.367vw+15.6px,21px);line-height:1.6;
  -webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}

.page{max-width:1340px;margin-inline:auto;padding-inline:var(--gut)}
header{padding:clamp(40px,7vh,84px) 0 clamp(30px,5vh,56px);border-bottom:1px solid var(--rule)}
.lbl{font-family:var(--sans);font-size:clamp(12px,.245vw+11.1px,14.5px);
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
h1{font-family:var(--disp);font-weight:500;letter-spacing:-.035em;line-height:1;
  font-size:clamp(38px,3.6vw+22px,76px);margin:.5em 0 0;max-width:16ch}
header p{margin:1.1em 0 0;max-width:52ch;color:var(--muted)}

.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,44px);
  padding:clamp(40px,7vh,80px) 0 clamp(60px,10vh,120px)}
@media(max-width:820px){.apps{grid-template-columns:1fr;gap:34px}}
.app{display:block;border-bottom:1px solid var(--rule);padding-bottom:22px}
.frame{aspect-ratio:4/5;overflow:hidden;background:#e8e2d7;margin-bottom:20px}
.frame img{transition:transform 1.1s var(--ease)}
.app:hover .frame img{transform:scale(1.045)}
.app h2{font-family:var(--disp);font-weight:500;letter-spacing:-.03em;
  font-size:clamp(24px,1.2vw+19px,34px);margin:0 0 .3em;line-height:1.05}
.app p{margin:0 0 .9em;color:var(--muted);font-size:clamp(16px,.28vw+15px,18.5px)}
.go{font-family:var(--sans);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass);display:inline-flex;gap:.6em;align-items:center}
.app:hover .go{gap:1.1em}
.go span{transition:margin .4s var(--ease)}
footer{border-top:1px solid var(--rule);padding:26px 0 60px;display:flex;flex-wrap:wrap;
  gap:8px 26px;font-family:var(--sans);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}