/* The Suicide Notes — shared stylesheet */

:root{
  --paper:#14161a;         /* dark charcoal */
  --paper-lift:#1c1f24;    /* slight lift for cards */
  --ink:#e8e5df;           /* warm ivory */
  --ink-soft:#8f8b85;      /* muted */
  --rule:#2b2e34;          /* subtle divider */
  --accent:#a26d5c;        /* warm terracotta */
  --maxw:640px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Fraunces",Georgia,serif;
  font-size:18px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  font-optical-sizing:auto;
  font-variation-settings:"opsz" 12;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* Top nav */
nav.topnav{
  padding:22px 0;
  display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px 24px;
  border-bottom:1px solid var(--rule);
}
nav.topnav .brand{
  font-family:"Fraunces",Georgia,serif;font-weight:400;font-style:italic;font-size:18px;color:var(--ink);
  text-decoration:none;letter-spacing:.005em;
  font-variation-settings:"opsz" 14;
}
nav.topnav .brand:hover{color:var(--accent)}
nav.topnav .navlinks{display:flex;gap:20px;flex-wrap:wrap}
nav.topnav .navlinks a{
  font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:15px;
  color:var(--ink-soft);text-decoration:none;letter-spacing:.005em;
}
nav.topnav .navlinks a:hover{color:var(--accent)}
nav.topnav .navlinks a.active{color:var(--ink);font-style:italic}

/* Masthead / hero */
header.mast{padding:48px 0 8px}
h1{
  font-family:"Fraunces",Georgia,serif;
  font-weight:400;font-style:italic;
  font-size:clamp(38px,7vw,58px);
  line-height:1.05;letter-spacing:-.015em;
  margin:20px 0 12px;
  color:var(--ink);
  font-variation-settings:"opsz" 96;
}
.sub{
  font-family:"Fraunces",Georgia,serif;font-weight:400;font-style:normal;
  font-size:clamp(18px,3vw,22px);
  color:var(--ink-soft);
  max-width:38ch;margin-bottom:24px;line-height:1.35;
  font-variation-settings:"opsz" 24;
}

/* Portrait */
.portrait{margin:0 -24px 30px;line-height:0}
.portrait img{width:100%;height:auto;display:block}
.portrait.small{margin:0 0 22px;max-width:220px}
.portrait.small img{border-radius:2px}

/* Bio prose */
.bio p{
  margin:0 0 18px;
  max-width:60ch;
  font-size:18px;line-height:1.65;
  color:var(--ink);
  font-variation-settings:"opsz" 14;
}
.bio p em, .bio em{font-style:italic}
.bio p:first-of-type{font-size:20px;line-height:1.55;color:var(--ink);font-variation-settings:"opsz" 18}

/* Divider */
.rule{border:none;border-top:1px solid var(--rule);margin:36px 0}

/* Signup */
.capture{margin:26px 0 6px}
.capture .cap{
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:17px;color:var(--ink-soft);
  display:block;margin-bottom:12px;max-width:44ch;line-height:1.4;
  font-variation-settings:"opsz" 18;
}
.capture form{display:flex;flex-wrap:wrap;gap:10px}
.capture input[type=email]{
  flex:1 1 220px;min-width:0;
  font-family:"Fraunces",Georgia,serif;font-size:16px;color:var(--ink);
  background:var(--paper-lift);border:1px solid var(--rule);border-radius:2px;
  padding:12px 14px;
}
.capture input::placeholder{color:#5c5955}
.capture input:focus{outline:1px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.capture button{
  flex:0 0 auto;font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:16px;font-weight:400;
  color:var(--paper);background:var(--ink);
  border:1px solid var(--ink);border-radius:2px;padding:12px 22px;cursor:pointer;transition:opacity .15s;
  letter-spacing:.005em;
}
.capture button:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.capture button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.capture button[disabled]{opacity:.5;cursor:wait}
.microcopy{font-size:14px;color:var(--ink-soft);margin-top:12px;font-style:italic;font-variation-settings:"opsz" 18}
.done{font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:18px;color:var(--accent);padding:6px 0;display:none;font-variation-settings:"opsz" 24}
.done.show{display:block}
.err{font-size:14px;color:#c86a5c;margin-top:9px;display:none;font-style:italic}
.err.show{display:block}

/* Novels list */
.novels{list-style:none;margin:24px 0 0}
.novels li{padding:18px 0;border-top:1px solid var(--rule)}
.novels li:last-child{border-bottom:1px solid var(--rule)}
.novels .title{
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:22px;color:var(--ink);
  display:block;margin-bottom:4px;font-variation-settings:"opsz" 36;
}
.novels .status{
  font-family:"Fraunces",Georgia,serif;font-size:13px;color:var(--ink-soft);
  letter-spacing:.05em;text-transform:uppercase;font-style:normal;
  font-variation-settings:"opsz" 12;
}
.novels .desc{margin-top:8px;color:var(--ink);font-size:16.5px;line-height:1.55;max-width:52ch}

/* Footer */
footer{padding:42px 0 52px;color:var(--ink-soft);font-size:13.5px;border-top:1px solid var(--rule);margin-top:40px}
footer .brand{font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:14.5px;color:var(--ink)}
footer .copy{margin-top:8px}
footer a{color:var(--ink-soft)}
footer a:hover{color:var(--accent)}

/* Links inside prose */
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
a:hover{color:var(--accent);text-decoration-color:var(--accent)}