/* Idealist Media — proposed refinement
   One 8px spacing scale, one sans, one display serif, one mono for labels. */
:root{
  --ink:#0B0B0C;--muted:#6E6E73;--faint:#A1A1A6;
  --bg:#FFFFFF;--surface:#F7F7F7;--rule:#EBEBEB;
  --accent:#2B46E8;--sun:#F5B52E;
  --s1:.5rem;--s2:1rem;--s3:1.5rem;--s4:2rem;--s6:3rem;--s8:4rem;--s12:6rem;--s16:8rem;
  --max:68rem;--measure:60ch;--radius:14px;
  --sans:Inter,system-ui,-apple-system,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 1rem/1.65 var(--sans);letter-spacing:-.011em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:.22em;text-decoration-thickness:1px;transition:text-decoration-color .15s,color .15s}
a:hover{text-decoration-color:currentColor}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s3)}

/* Header */
header.site{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid transparent}
header.site .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);height:4rem}
.wordmark{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.95rem;letter-spacing:-.02em;text-decoration:none}
.spark{width:1rem;height:1rem;flex:none}
nav.site{display:flex;gap:var(--s3)}
nav.site a{color:var(--muted);font-size:.875rem;text-decoration:none}
nav.site a:hover{color:var(--ink)}

/* Type */
.eyebrow{font:500 .72rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);display:block;margin-bottom:var(--s3)}
h1{font:400 clamp(2.75rem,7vw,5rem)/1 var(--serif);letter-spacing:-.025em;max-width:16ch}
h1 em{font-style:italic;color:var(--muted)}
h2{font-size:1.5rem;font-weight:500;line-height:1.25;letter-spacing:-.025em;margin:var(--s6) 0 var(--s2)}
h3{font-size:1rem;font-weight:500;letter-spacing:-.015em;margin:var(--s4) 0 var(--s1)}
p{max-width:var(--measure);color:var(--ink)}
p+p{margin-top:var(--s2)}
.lede{font-size:1.125rem;line-height:1.55;color:var(--muted);max-width:44ch;margin-top:var(--s3)}
ul{max-width:var(--measure);padding-left:1.1rem;margin-top:var(--s2)}
li{margin:var(--s1) 0}
li::marker{color:var(--faint)}

/* Layout */
main section{padding:var(--s12) 0;border-top:1px solid var(--rule)}
main section:first-child{border-top:0}
main > .wrap > section:first-child > h2:first-of-type{margin-top:var(--s8)}
.hero{padding:var(--s16) 0 var(--s12)}
.hero .actions{display:flex;gap:var(--s2);align-items:center;margin-top:var(--s6);flex-wrap:wrap}
.split{display:grid;grid-template-columns:1fr 2fr;gap:var(--s6)}
.split h2{margin:0;font-size:1.125rem}
.split p{color:var(--muted)}
.split p strong{color:var(--ink);font-weight:500}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;height:2.75rem;padding:0 1.25rem;border-radius:999px;background:var(--ink);color:#fff;font-size:.9rem;font-weight:500;text-decoration:none;transition:opacity .15s}
.btn:hover{opacity:.85}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.btn.ghost:hover{opacity:1;box-shadow:inset 0 0 0 1px var(--ink)}

/* Principles grid */
.rules{list-style:none;padding:0;margin:0;max-width:none;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.rules li{margin:0;background:var(--surface);border-radius:var(--radius);padding:var(--s3);display:flex;flex-direction:column;gap:var(--s8)}
.rules .n{font:500 .72rem/1 var(--mono);color:var(--faint);letter-spacing:.04em}
.rules strong{display:block;font-weight:500;letter-spacing:-.02em;margin-bottom:.25rem}
.rules span{color:var(--muted);font-size:.9rem;line-height:1.5}

/* Apps */
.apps{margin-top:var(--s4);display:grid;gap:var(--s2)}
.app{display:grid;grid-template-columns:4rem 1fr auto;gap:var(--s3);align-items:center;padding:var(--s3);background:var(--surface);border-radius:var(--radius)}
.app .tile{width:4rem;height:4rem;border-radius:1rem;background:var(--ink);color:#fff;display:grid;place-items:center;font:400 2rem/1 var(--serif)}
.app h3{margin:0}
.app p{margin:.25rem 0 0;color:var(--muted);font-size:.925rem}
.badges{display:flex;gap:.25rem var(--s2);flex-wrap:wrap;font-size:.85rem;margin-top:var(--s1)!important}
.app:has(.badges){align-items:start}
.badges a{color:var(--muted)}
.badges a:hover{color:var(--ink)}
.app .go{font:500 .72rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-decoration:none;white-space:nowrap}
.note{font-size:.875rem;color:var(--muted);margin-top:var(--s4)}

/* Legal / long-form */
.legal h2{font-size:1.125rem;margin-top:var(--s6)}
.legal p,.legal li{max-width:68ch}
.updated{font:400 .75rem/1 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:var(--s3) 0 var(--s4)}

/* Footer */
footer.site{border-top:1px solid var(--rule);padding:var(--s6) 0 var(--s8);font-size:.825rem;color:var(--muted)}
footer.site .wrap{display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap}
footer.site a{color:var(--muted);text-decoration:none;margin-left:var(--s3)}
footer.site a:first-child{margin-left:0}
footer.site a:hover{color:var(--ink)}

@media (max-width:52rem){
  .rules{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:var(--s2)}
}
@media (max-width:34rem){
  .wrap{padding:0 var(--s2)}
  nav.site{gap:var(--s2)}
  .hero{padding:var(--s12) 0 var(--s8)}
  main section{padding:var(--s8) 0}
  .rules{grid-template-columns:1fr}
  .rules li{gap:var(--s4)}
  .app{grid-template-columns:3.25rem 1fr}
  .app .tile{width:3.25rem;height:3.25rem;font-size:1.6rem}
  .app .go{display:none}
}