:root{
  --ink:#111; --ink-2:#444; --ink-3:#767676;
  --rule:#e5e5e5; --bg:#fff; --bg-2:#fafafa;
  --measure:34rem;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink); background:var(--bg);
  line-height:1.65; font-size:17px;
  padding:0 1.5rem;
}
.wrap{max-width:var(--measure); margin:0 auto}

/* header */
.masthead{display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem; padding:2.5rem 0 0; flex-wrap:wrap}
.brand{font-size:1.05rem; font-weight:700; letter-spacing:-.02em;
  color:var(--ink); text-decoration:none}
.nav{display:flex; gap:1.15rem; flex-wrap:wrap}
.nav a{font-size:.9rem; color:var(--ink-3); text-decoration:none}
.nav a:hover{color:var(--ink)}

/* intro */
.intro{padding:3.5rem 0 2.5rem; border-bottom:1px solid var(--rule)}
.intro h1{font-size:clamp(1.8rem,5vw,2.4rem); font-weight:800;
  letter-spacing:-.035em; line-height:1.18; margin-bottom:.9rem}
.intro p{color:var(--ink-2); font-size:1.05rem}

/* posts */
.posts{padding:2.5rem 0}
.posts h2{font-size:.78rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.09em; color:var(--ink-3); margin-bottom:1.6rem}
.post{display:block; text-decoration:none; color:inherit;
  padding:1.3rem 0; border-bottom:1px solid var(--rule)}
.post:first-of-type{border-top:1px solid var(--rule)}
.post h3{font-size:1.12rem; font-weight:600; letter-spacing:-.015em;
  margin-bottom:.3rem}
.post:hover h3{text-decoration:underline; text-underline-offset:3px}
.post .meta{font-size:.83rem; color:var(--ink-3)}
.post p{color:var(--ink-2); font-size:.95rem; margin-top:.4rem}

.empty{border:1px dashed var(--rule); border-radius:10px;
  padding:2rem 1.5rem; text-align:center; color:var(--ink-3);
  background:var(--bg-2); font-size:.95rem}

/* footer */
.foot{padding:2.5rem 0 3.5rem; border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; flex-wrap:wrap; font-size:.88rem; color:var(--ink-3)}
.foot .social{display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap}
/* hairline separators so the three read as one group, not three buttons */
.foot .social a + a{position:relative; padding-left:.9rem}
.foot .social a + a::before{content:""; position:absolute; left:0; top:.15em;
  width:1px; height:.85em; background:var(--rule)}
.foot a{color:var(--ink-3); text-decoration:none}
.foot a:hover{color:var(--ink)}

@media(max-width:520px){
  body{font-size:16px; padding:0 1.15rem}
  .intro{padding:2.5rem 0 2rem}
}

/* interactive-story badge on post listings */
.post .meta{display:flex; align-items:center; gap:.5rem}
.badge{display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--bg); background:var(--ink);
  border-radius:4px; padding:.15rem .4rem}

/* Post preview — a stack of sheets, so the card reads as a deck at a glance.
   The art shows blame converging on a message and dissolving before it lands;
   the title beneath supplies the "don't". Hovering stands the blame down. */
.preview{position:relative; z-index:0; margin:.6rem 0 1.05rem;
  display:flex; flex-direction:column; align-items:center;
  border:1px solid var(--rule); border-radius:10px; background:var(--bg-2);
  padding:1.25rem 1.35rem 1.15rem;
  transition:border-color .45s ease, transform .55s cubic-bezier(.34,1.18,.64,1)}
.preview:before,.preview:after{content:""; position:absolute; inset:0; z-index:-1;
  border:1px solid var(--rule); border-radius:10px; background:var(--bg-2);
  transition:transform .55s cubic-bezier(.34,1.18,.64,1), opacity .45s ease}
.preview:before{transform:translate(6px,-6px)}
.preview:after{transform:translate(12px,-12px); opacity:.5}
.post:hover .preview{border-color:var(--ink-3)}
.post:hover .preview:before{transform:translate(9px,-9px)}
.post:hover .preview:after{transform:translate(18px,-18px)}

.preview-kicker{align-self:flex-start; font-size:.6rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)}
.preview-art{display:block; width:100%; max-width:250px; color:var(--ink); margin:.4rem 0 .6rem}
.preview-art svg{width:100%; height:auto; display:block; overflow:visible}

/* The message breathes; blame converges and dissolves before reaching it.
   Runs continuously, so the card is alive before anyone interacts with it. */
.preview-art .msg{transform-box:fill-box; transform-origin:center;
  animation:msgBreathe 4.2s ease-in-out infinite}
.preview-art .dart{opacity:0}
.preview-art .dl{animation:dartL 3.4s cubic-bezier(.4,0,.6,1) infinite}
.preview-art .dr{animation:dartR 3.4s cubic-bezier(.4,0,.6,1) infinite .55s}
.preview-art .dt{animation:dartT 3.4s cubic-bezier(.4,0,.6,1) infinite 1.1s}

@keyframes msgBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes dartL{
  0%{opacity:0;transform:translateX(-14px)}
  18%{opacity:.55}
  52%{opacity:.55;transform:translateX(12px)}
  70%,100%{opacity:0;transform:translateX(20px)}}
@keyframes dartR{
  0%{opacity:0;transform:translateX(14px)}
  18%{opacity:.55}
  52%{opacity:.55;transform:translateX(-12px)}
  70%,100%{opacity:0;transform:translateX(-20px)}}
@keyframes dartT{
  0%{opacity:0;transform:translateY(-14px)}
  18%{opacity:.55}
  52%{opacity:.55;transform:translateY(12px)}
  70%,100%{opacity:0;transform:translateY(20px)}}

/* hover and click: the blame stands down entirely */
.preview-art .darts{transition:opacity .5s ease}
.preview-art .msg{transition:transform .6s cubic-bezier(.34,1.18,.64,1)}
.post:hover .preview-art .darts{opacity:0}

.preview-dots{align-self:flex-start; display:flex; gap:5px; align-items:center}
.preview-dots i{width:5px; height:5px; border-radius:50%; background:#cfcfca}
.preview-dots i.on{width:18px; border-radius:3px; background:var(--ink)}

/* click: the card pops forward and the stack lets go */
.post.opening .preview{transform:translateY(-7px) scale(1.035)}
.post.opening .preview:before{transform:translate(20px,-20px); opacity:0}
.post.opening .preview:after{transform:translate(38px,-38px); opacity:0}
.post.opening .preview-art .darts{opacity:0}

@media(prefers-reduced-motion:reduce){
  .preview,.preview:before,.preview:after,.preview-art .darts,.preview-art .msg{transition:none}
  .preview-art .msg,.preview-art .dart{animation:none}
  .preview-art .dart{opacity:.5}
}