:root { --cream:#e5e1d8; --paper:#f8f6f0; --ink:#1a1a1a; --muted:#665f57; --red:#c8472b; --display:"Archivo Black",sans-serif; --body:"Instrument Sans",sans-serif; --mono:"IBM Plex Mono",monospace; }
* { box-sizing:border-box; }
body { min-width:320px; min-height:100vh; margin:0; background:var(--cream); color:var(--ink); font-family:var(--body); -webkit-font-smoothing:antialiased; }
.links-page { position:relative; width:min(100%,460px); min-height:100vh; margin:0 auto; padding:28px 20px 32px; }
.grain { position:fixed; inset:-50%; z-index:-1; width:200%; height:200%; opacity:.045; pointer-events:none; background-image: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='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); }
.intro { text-align:center; }
.monogram { display:grid; width:48px; height:48px; margin:0 auto 17px; place-items:center; border:1px solid var(--ink); border-radius:50%; color:var(--ink); font-family:var(--display); font-size:25px; text-decoration:none; }
.eyebrow, footer { margin:0; color:var(--muted); font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; }
h1 { margin:10px 0 12px; font-family:var(--display); font-size:clamp(31px,9vw,42px); letter-spacing:-.04em; line-height:.96; }
.lede { max-width:275px; margin:0 auto; color:var(--muted); font-size:15px; line-height:1.45; }
.film-frame { position:relative; margin:24px 0 22px; padding:7px 7px 23px; background:var(--ink); box-shadow:6px 7px 0 rgba(26,26,26,.16); transform:rotate(-1.25deg); }
.film-frame img { display:block; width:100%; aspect-ratio:1.64; object-fit:cover; filter:saturate(.9) contrast(1.05); }
.film-frame figcaption { position:absolute; right:9px; bottom:6px; left:9px; display:flex; justify-content:space-between; color:#e1c97f; font-family:var(--mono); font-size:8px; font-weight:600; letter-spacing:.13em; }
.link-list { display:grid; gap:11px; margin-bottom:52px; }
.featured-link { position:relative; isolation:isolate; overflow:hidden; margin-top:24px; }
.featured-link::after { position:absolute; inset:0 auto 0 -65%; z-index:0; width:55%; content:""; pointer-events:none; background:linear-gradient(105deg,transparent 15%,rgba(255,250,241,.1) 36%,rgba(255,250,241,.42) 50%,rgba(255,250,241,.1) 64%,transparent 85%); transform:skewX(-18deg); animation:soft-shimmer 4.6s ease-in-out 1.4s infinite; }
.link-card { display:flex; align-items:center; min-height:75px; gap:13px; padding:12px 15px; border:1px solid var(--ink); background:var(--paper); box-shadow:3px 3px 0 var(--ink); color:var(--ink); text-decoration:none; transition:transform .16s ease,box-shadow .16s ease; }
.link-card:hover,.link-card:focus-visible { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.link-card:focus-visible { outline:3px solid var(--red); outline-offset:3px; }
.app-store { background:#c96a40; color:#fffaf1; }
.browser-note { margin:14px 7px 0; color:var(--muted); font-size:13px; line-height:1.45; text-align:center; }
.browser-note strong { color:var(--ink); font-weight:600; }
.link-icon { display:grid; width:39px; height:39px; flex:0 0 39px; place-items:center; border:1px solid currentColor; border-radius:50%; font-family:var(--mono); font-size:19px; }
.link-icon.cartridge { overflow:visible; border:0; border-radius:0; }
.link-icon.cartridge img { display:block; width:38px; height:38px; object-fit:contain; transform:rotate(-8deg) scale(1.8); transform-origin:center; }
.link-copy { position:relative; z-index:1; display:grid; gap:2px; }
.link-copy strong { font-family:var(--mono); font-size:12px; letter-spacing:.08em; }
.link-copy small { color:var(--muted); font-size:13px; }.app-store .link-copy small { color:#fff0df; }
.arrow { position:relative; z-index:1; display:block; flex:0 0 21px; margin-left:auto; font-size:23px; line-height:1; }
footer { display:flex; justify-content:center; gap:7px; text-align:center; } footer a { color:inherit; text-decoration:none; } footer a:hover { color:var(--ink); text-decoration:underline; }
@keyframes soft-shimmer { 0%,58%,100% { transform:skewX(-18deg) translateX(0); } 76% { transform:skewX(-18deg) translateX(310%); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }