/* ==========================================================================
   Almost Kiss — blog stylesheet
   Tokens below are copied verbatim from the <style> block in /index.html.
   They are duplicated rather than shared because the landing page keeps its
   CSS inline (single-request, no render-blocking fetch) and is deliberately
   left untouched. If you change a colour or typeface on the landing page,
   mirror it here.
   ========================================================================== */

:root{
  --ink:#0A0508;
  --wine:#160910;
  --panel:#1D0C13;
  --blood:#A3122B;
  --blood-bright:#E22345;
  --foil:#C9A24B;
  --foil-hi:#F0DCA8;
  --cream:#F2E7D8;
  --muted:#A2909A;
  --line:rgba(201,162,75,.22);
  --red-hi:#D42A4E;
  --red-lo:#7E0E23;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Cormorant Garamond",Georgia,serif;
  --wordmark:"Cinzel",serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--cream);font-family:var(--serif);font-size:19px;line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:var(--blood);color:var(--cream)}
img{max-width:100%;display:block}
a{color:var(--foil)}
button{font-family:inherit;cursor:pointer}

.shell{max-width:1180px;margin:0 auto;padding:0 22px}
.wordmark{font-family:var(--wordmark);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red-hi)}
.brandlogo{display:block;width:auto;height:32px}
footer .brandlogo{height:28px}
header.site{display:flex;align-items:center;justify-content:space-between;padding:22px 0;gap:16px}
header.site .navlinks{display:flex;align-items:center;gap:18px;font-family:var(--sans);font-size:14px}
header.site .navlinks a{color:var(--muted);text-decoration:none;white-space:nowrap}
header.site .navlinks a:hover{color:var(--cream)}
/* On narrow phones the text link wraps and crowds the logo. Drop it — the logo
   still goes home and the footer carries the Blog link. */
@media (max-width:560px){
  header.site .navlinks .textlink{display:none}
  .brandlogo{height:26px}
}
.pill{font-family:var(--sans);font-size:13px;color:var(--cream);background:linear-gradient(160deg,var(--red-hi),var(--red-lo));border:none;border-radius:999px;padding:9px 18px;font-weight:600;text-decoration:none;white-space:nowrap}
.kicker{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--foil);margin-bottom:18px}
.fine{font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:12px}

footer{padding:44px 0 60px;border-top:1px solid var(--line);margin-top:64px}
footer p{font-family:var(--sans);font-size:13.5px;color:var(--muted);margin-top:12px;max-width:62ch}

/* ---------- BLOG INDEX ---------- */
.blog-head{padding:24px 0 8px;max-width:640px}
.blog-head h1{font-family:var(--serif);font-weight:500;font-size:clamp(34px,4.6vw,54px);line-height:1.08;letter-spacing:-.01em}
.blog-head h1 em{font-style:italic;color:var(--foil-hi)}
.blog-head .sub{margin-top:16px;font-size:20px;color:var(--muted)}

/* Tag filter — progressive enhancement. Without JS these stay visible and inert,
   and every post card remains in the DOM, so the page still works. */
.tagbar{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 8px}
.tagbtn{font-family:var(--sans);font-size:13.5px;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:999px;padding:8px 15px;transition:color .18s ease,border-color .18s ease}
.tagbtn:hover{color:var(--cream);border-color:var(--foil)}
.tagbtn.on{background:linear-gradient(160deg,var(--red-hi),var(--red-lo));color:var(--cream);border-color:transparent;font-weight:600}

.postgrid{display:grid;grid-template-columns:1fr;gap:18px;padding:26px 0 0;list-style:none}
.postcard{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.postcard:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.5)}
.postcard.hide{display:none}
.postcard a.card-link{display:block;text-decoration:none;color:inherit;height:100%}
/* Card art is a tinted gradient rather than the OG image: the OG card has the
   title baked into it, which would repeat the headline printed directly below.
   The tint is picked from the post's first tag, so a cluster reads as a set. */
.postcard .art{aspect-ratio:16/7;border-bottom:1px solid var(--line);position:relative}
.postcard .art::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 130% at 82% 12%,rgba(240,220,168,.10),transparent 62%)}
.postcard .art[data-tint="0"]{background:radial-gradient(140% 120% at 18% 0%,#3d0a17,#12060c 72%)}
.postcard .art[data-tint="1"]{background:radial-gradient(140% 120% at 80% 0%,#2a2140,#100b18 72%)}
.postcard .art[data-tint="2"]{background:radial-gradient(140% 120% at 30% 0%,#0e2a22,#08120f 72%)}
.postcard .art[data-tint="3"]{background:radial-gradient(140% 120% at 70% 0%,#33230b,#140e07 72%)}
.postcard .art[data-tint="4"]{background:radial-gradient(140% 120% at 24% 0%,#3a1020,#130610 72%)}
.postcard .art[data-tint="5"]{background:radial-gradient(140% 120% at 76% 0%,#1c2438,#0a0d16 72%)}
.postcard .art .arttag{position:absolute;left:18px;bottom:14px;z-index:1;font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--foil)}
.postcard .body{padding:20px}
.postcard h2{font-family:var(--serif);font-weight:600;font-size:25px;line-height:1.18;color:var(--cream)}
.postcard p{font-size:17px;color:var(--muted);margin-top:9px;line-height:1.5}
.postcard .meta{font-family:var(--sans);font-size:12.5px;color:var(--foil);letter-spacing:.06em;text-transform:uppercase;margin-top:14px}
.emptystate{font-family:var(--sans);color:var(--muted);padding:40px 0;display:none}
.emptystate.show{display:block}

/* ---------- ARTICLE ---------- */
.article-wrap{max-width:720px;margin:0 auto;padding:14px 0 0}
.crumbs{font-family:var(--sans);font-size:13px;color:var(--muted);margin-bottom:22px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--foil)}
.article-head h1{font-family:var(--serif);font-weight:600;font-size:clamp(32px,4.4vw,50px);line-height:1.1;letter-spacing:-.01em}
.article-meta{font-family:var(--sans);font-size:13px;color:var(--foil);letter-spacing:.08em;text-transform:uppercase;margin-top:16px}
.taglist{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.taglist a{font-family:var(--sans);font-size:12.5px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 12px;text-decoration:none}
.taglist a:hover{color:var(--cream);border-color:var(--foil)}
.hero-img{margin:30px 0 0;border-radius:16px;border:1px solid var(--line);overflow:hidden}

/* The quotable answer block. Kept high on the page and visually distinct because
   answer engines lift this paragraph — see content/WRITING.md. */
.answer{background:radial-gradient(120% 100% at 50% 0%,rgba(163,18,43,.13),transparent 60%),var(--panel);border:1px solid var(--line);border-left:3px solid var(--red-hi);border-radius:14px;padding:22px 24px;margin:32px 0 8px}
.answer p{font-size:20px;line-height:1.55;color:var(--cream);margin:0}

.prose{padding:14px 0 0}
.prose p{font-size:20px;line-height:1.68;margin-top:20px}
.prose h2{font-family:var(--serif);font-weight:600;font-size:32px;line-height:1.2;margin-top:44px}
.prose h3{font-family:var(--serif);font-weight:600;font-size:25px;line-height:1.25;margin-top:32px}
.prose ul,.prose ol{margin-top:18px;padding-left:24px}
.prose li{font-size:20px;line-height:1.6;margin-top:9px}
.prose li::marker{color:var(--foil)}
.prose blockquote{border-left:3px solid var(--foil);padding-left:20px;margin-top:24px;font-style:italic;color:var(--foil-hi)}
.prose strong{color:var(--foil-hi);font-weight:600}
.prose a{color:var(--foil);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(201,162,75,.45)}
.prose a:hover{color:var(--foil-hi)}
.prose hr{border:none;border-top:1px solid var(--line);margin:40px 0}
.prose img{border-radius:14px;border:1px solid var(--line);margin-top:24px}
.prose table{width:100%;border-collapse:collapse;margin-top:24px;font-size:17px;font-family:var(--sans)}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.prose th{color:var(--foil-hi);font-weight:600}

/* Mid-article contextual CTA */
.inline-cta{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 24px;margin:44px 0}
.inline-cta h3{font-family:var(--serif);font-weight:600;font-size:26px;line-height:1.2}
.inline-cta p{font-size:18px;color:var(--muted);margin-top:10px}
.inline-cta .cta{display:inline-block;margin-top:18px;font-family:var(--sans);font-size:16px;font-weight:600;color:var(--cream);background:linear-gradient(160deg,var(--red-hi),var(--red-lo));border-radius:999px;padding:14px 28px;text-decoration:none}
.inline-cta .cta:hover{filter:brightness(1.06)}

/* FAQ */
.faq{margin-top:48px}
.faq h2{font-family:var(--serif);font-weight:600;font-size:32px;line-height:1.2}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{font-family:var(--serif);font-weight:600;font-size:21px;color:var(--cream);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--foil);font-size:24px;line-height:1;flex-shrink:0}
.faq details[open] summary::after{content:"−"}
.faq details p{font-size:18px;color:var(--muted);margin-top:12px;line-height:1.6}

/* Related posts */
.related{margin-top:52px}
.related h2{font-family:var(--serif);font-weight:600;font-size:28px;margin-bottom:18px}
.related ul{list-style:none;display:grid;gap:12px}
.related a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;text-decoration:none;color:var(--cream);font-size:19px;transition:border-color .2s ease}
.related a:hover{border-color:var(--foil)}
.related a span{display:block;font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:5px}

/* ---------- GATE (same markup + behaviour as the landing page) ---------- */
.gate{background:radial-gradient(120% 100% at 50% 0%,rgba(163,18,43,.14),transparent 60%),var(--panel);border:1px solid var(--line);border-radius:22px;padding:40px 24px;text-align:center;margin-top:56px}
.gate h2{font-family:var(--serif);font-weight:600;font-size:clamp(28px,4vw,40px);line-height:1.15}
.gate .sub{color:var(--muted);margin-top:10px;font-size:19px}
.gate-row{margin-top:26px;display:flex;flex-direction:column;gap:12px;max-width:420px;margin-left:auto;margin-right:auto}
.gate input{font-family:var(--sans);font-size:16px;color:var(--cream);background:rgba(10,5,8,.7);border:1px solid var(--line);border-radius:999px;padding:15px 20px;width:100%}
.gate input:focus{outline:2px solid var(--foil);outline-offset:2px}
.gate .go{font-family:var(--sans);font-size:16px;font-weight:600;color:var(--cream);background:linear-gradient(160deg,var(--red-hi),var(--red-lo));border:none;border-radius:999px;padding:15px 26px}
.err{display:none;font-family:var(--sans);font-size:14px;color:var(--blood-bright);margin-top:10px}
.err.show{display:block}
#postsign{display:none}
#postsign.show{display:block}
.vote-wrap{margin-top:22px}
.vote-q{font-family:var(--sans);font-size:15px;color:var(--muted);margin-bottom:12px}
.vote-btn{font-family:var(--sans);font-size:14px;color:var(--cream);background:transparent;border:1px solid var(--line);border-radius:999px;padding:10px 16px;margin:4px}
.vote-btn.picked{background:linear-gradient(160deg,var(--red-hi),var(--red-lo));color:var(--cream);border-color:transparent;font-weight:600}
.share-card{display:none;margin-top:26px}
.share-card.show{display:block}
.share-btn{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--cream);background:transparent;border:1px solid var(--red-hi);border-radius:999px;padding:12px 24px}

/* ---------- DESKTOP ---------- */
@media (min-width:760px){
  .postgrid{grid-template-columns:repeat(2,1fr);gap:22px}
  .gate-row{flex-direction:row}
  .gate input{flex:1}
  .related ul{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1040px){
  .postgrid{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}