/* PCOS Decoded: the one stylesheet. Every page on the site links it, and so do the
   confirm and unsubscribe pages served by backend/subscribe/handler.py.

   Warm palette, contrast-audited. Body copy clears AAA and every link clears AA on
   every surface it can sit on (page, blush panel, white card, both ends of the
   header gradient), in light and dark. --blush, --peach and --gold are decorative
   only, never text colors.

   The two emails can't load this file, so they repeat the light values inline.
   tools/build.py fails if an email uses a color that isn't a token below. */
:root{
  --ink:#3a1f2e; --soft:#46313e; --muted:#62495a; --faint:#735a6a;
  --line:#f0dcdc; --bg:#fdf5f3; --card:#ffffff; --blush:#fbe7e6; --peach:#fdeadf;
  --accent:#a3355c; --accent-hover:#852846; --gold:#e3a857;
  --btn:#a3355c; --btn-ink:#ffffff; --ok:#1f5c40; --warn:#8a2f2f;
  --r-panel:26px; --r-card:18px;
  --sans:ui-sans-serif,system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{ --ink:#f7eef2; --soft:#e4d5dd; --muted:#c7b3bf; --faint:#a8939f;
    --line:#3a2934; --bg:#161016; --card:#261a22; --blush:#2e1f29; --peach:#2b1d24;
    --accent:#f0a3bf; --accent-hover:#f7c3d6; --gold:#e8b56c;
    --btn:#e0789f; --btn-ink:#1c1219; --ok:#84cfa8; --warn:#f0a0a0; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:19px/1.72 ui-serif,Georgia,"Iowan Old Style","Times New Roman",serif}
.wrap{max-width:38rem;margin:0 auto;padding:0 20px}

/* Links are underlined, always. Color alone is not an affordance. */
a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:3px}
a:hover{color:var(--accent-hover);text-decoration-thickness:2.5px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* --- page header: the blush card every page opens with ---------------------- */
header,.card{background:linear-gradient(135deg,var(--blush) 0%,var(--peach) 100%);
  border-radius:var(--r-panel)}
header{margin:26px 0 8px;padding:32px 30px 28px}
.brand{display:flex;align-items:center;gap:8px;margin:0;font-size:.8rem;
  letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--accent);
  font-family:var(--sans)}
.brand a{color:inherit;text-decoration:none}
.brand a:hover{text-decoration:underline}
.bloom{width:20px;height:20px;flex:none}
.bloom .p{fill:var(--accent);opacity:.45}
.bloom .c{fill:var(--gold)}
h1{font-size:clamp(1.9rem,5.2vw,2.5rem);line-height:1.18;letter-spacing:-.02em;
  margin:.55em 0 .35em;color:var(--ink)}
.home h1{font-size:clamp(2.1rem,5.6vw,3rem);line-height:1.14;letter-spacing:-.022em;
  max-width:18ch}
.meta{font-size:.95rem;color:var(--faint);margin:0 0 1.1em;font-family:var(--sans)}
.lede{font-size:1.18rem;line-height:1.6;color:var(--soft);margin:0 0 .8em;max-width:42ch}
.lede:last-child{margin-bottom:0}
.rule{height:0;border:0;margin:38px 0}

/* --- prose ------------------------------------------------------------------ */
h2{font-size:1.42rem;line-height:1.3;letter-spacing:-.01em;margin:0 0 .6em;color:var(--ink)}
h2::before{content:"";display:block;width:34px;height:4px;border-radius:4px;
  background:var(--gold);margin:0 0 .7em}
article h2{margin-top:2.1em}
article h2:first-child{margin-top:0}
h3{font-size:1.15rem;margin:1.9em 0 .5em;color:var(--ink)}
p{margin:0 0 1.15em;color:var(--soft)}
strong{color:var(--ink);font-weight:600}
.quiet{color:var(--muted)}
blockquote{margin:1.8em 0;padding:18px 22px;border-left:4px solid var(--accent);
  background:var(--blush);border-radius:0 var(--r-card) var(--r-card) 0}
blockquote p{margin:0;font-style:italic;font-size:1.05rem}
ul.plain{list-style:none;padding:0;margin:0 0 1.2em}
ul.plain li{padding:.5em 0 .5em 1.5em;position:relative;color:var(--soft)}
ul.plain li::before{content:"";position:absolute;left:.2em;top:1.05em;width:8px;height:8px;
  border-radius:50%;background:var(--accent);opacity:.7}
ol{padding-left:1.3em;margin:0 0 1.2em}
ol li{color:var(--soft);margin:.6em 0;font-size:1rem;line-height:1.62}
.disclaimer{font-style:italic;color:var(--muted);font-size:1rem;
  border-left:3px solid var(--line);padding-left:20px;margin:1.8em 0 1.15em}
.tags{font-size:.92rem;color:var(--faint);margin:2.4em 0 0;font-family:var(--sans)}

/* --- buttons: one pill, whether it is a <button> or a link ------------------ */
/* 52px tall and 17px text: easy to tap, and at/above 16px so iOS won't zoom. */
button,.btn{display:inline-block;padding:15px 30px;border-radius:999px;border:0;
  background:var(--btn);color:var(--btn-ink);font:600 17px/22px var(--sans);
  min-height:52px;cursor:pointer;text-decoration:none;transition:filter .15s}
button:hover:not(:disabled),.btn:hover{filter:brightness(1.08);color:var(--btn-ink)}
button:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;
  border-radius:999px}
button:disabled{opacity:.55;cursor:default}

/* --- panels ----------------------------------------------------------------- */
.signup,.more,.cta{border-radius:var(--r-panel);padding:30px 28px}
.signup h2,.more h2,.cta h2{font-size:1.3rem;margin-bottom:.5em}
.signup,.more{background:var(--blush)}
.cta{background:var(--card);border:1px solid var(--line)}
.signup{margin:12px 0 8px}
.more{margin:40px 0 8px}
.cta{margin:24px 0 8px}
.cta p{margin:0 0 1.1em}

ul.posts,.more ul{list-style:none;padding:0;margin:0}
ul.posts li,.more li{background:var(--card);border-radius:var(--r-card);margin:0 0 14px}
ul.posts li:last-child,.more li:last-child{margin-bottom:0}
ul.posts li{border:1px solid var(--line);padding:20px 22px}
ul.posts a{font-size:1.24rem;line-height:1.3;font-weight:600;letter-spacing:-.01em;
  display:inline-block;margin-bottom:.3em}
ul.posts .when{font-size:.9rem;color:var(--faint);margin:0 0 .45em;font-family:var(--sans)}
ul.posts p{margin:0;font-size:1rem;color:var(--soft)}
.more li{padding:16px 18px}
.more a{font-weight:600;font-size:1.08rem;line-height:1.35;display:inline-block}
.more p{margin:.4em 0 0;font-size:.95rem;line-height:1.55}

.signup form{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 14px}
input[type=email]{flex:1 1 16rem;min-width:0;padding:15px 18px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  font:inherit;font-size:17px;min-height:52px}
input[type=email]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.fine{font-size:.95rem;line-height:1.62;color:var(--soft)}
.signup .fine{margin:0}
.msg{margin:14px 0 0;font-size:1rem;min-height:1.4em}
.msg.ok{color:var(--ok)} .msg.err{color:var(--warn)}

footer{margin:56px 0 44px;padding-top:26px;border-top:1px solid var(--line);
  font-size:.95rem;font-family:var(--sans);line-height:1.7}
footer p{color:var(--faint);margin:0 0 .9em}
footer a{color:var(--faint)}
footer a:hover{color:var(--accent)}

/* --- one-card pages: 404, and confirm / unsubscribe from the subscribe API --- */
body.solo{display:grid;place-items:center;min-height:100vh;padding:20px}
.card{padding:40px 38px;width:100%;max-width:32rem}
.card .brand{margin-bottom:1.6rem}
.card h1{font-size:1.6rem;line-height:1.25;letter-spacing:-.015em;margin:0 0 .55em}
.card p{overflow-wrap:anywhere}
.card p:last-child{margin-bottom:0}
.card form{margin:1.5rem 0 1.3rem}

@media (max-width:420px){
  header{padding:26px 22px 24px}
  .signup,.more,.cta{padding:26px 20px}
  .card{padding:32px 24px}
}