/* SYS — styleyourstories.in. The locked frame: ink on paper, rules,
   Playfair for headings, Fraunces only as the wordmark, Space Mono for
   the technical voice. The colour of SYS is the fashion; this site is
   the frame around the door. */
:root{
  --ink:#111111; --obsidian:#0A0A0A; --paper:#F8F8F6;
  --graphite:#2A2A2A; --slate:#6E6E6A; --mist:#D8D8D4;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.5 Inter,-apple-system,sans-serif}
.wrap{max-width:680px;margin:0 auto;padding:0 20px}
.mark{font-family:Fraunces,serif;font-weight:300;
  font-variation-settings:'opsz' 144,'WONK' 1;letter-spacing:-.02em}
h1,h2{font-family:'Playfair Display',serif;font-weight:400;line-height:1.08;
  letter-spacing:-.024em;margin:0}
h1{font-size:clamp(38px,7vw,64px)}
h2{font-size:28px}
.tech{font-family:'Space Mono',monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase}
.muted{color:var(--slate)}
.rule{border:0;border-top:1px solid var(--mist);margin:0}
a{color:inherit}
.cta{display:block;background:var(--ink);color:var(--paper);
  text-align:center;padding:18px;text-decoration:none}
.box{border:1px solid var(--ink);padding:18px;text-align:center;
  text-decoration:none;display:block}
header{display:flex;justify-content:space-between;align-items:baseline;
  padding:40px 0 0}
footer{padding:48px 0 64px}
section{padding:36px 0}
.loop span{display:inline-block;margin-right:14px}