/* Kind to Me: guides + the free kind line of the day.
   One standalone stylesheet in the new site design (matches index.html and privacy.html:
   DM Serif Display headings, Karla text, warm linen paper, deep green ink). No shared/app.css.
   Font and art urls are relative to this file. */

@font-face{font-family:'DM Serif Display';font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/DMSerifDisplay-italic-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/DMSerifDisplay-normal-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Karla';font-style:normal;font-weight:300 700;font-display:swap;src:url(../assets/fonts/Karla-normal-300_700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  color-scheme:light;
  --paper:#f3faf8;
  --ink:#1f3a36;
  --muted:#48645f;
  --accent:#1d6a5f;
  --on-accent:#fff;
  --gold:#835610;
  --gold-ink:#835610;
  --surface:#fff;
  --veil-a:rgba(255,255,255,.08);
  --veil-b:rgba(255,255,255,.22);
  --img-filter:none;
  --line:color-mix(in srgb,var(--ink) 14%,transparent);
  --soft:color-mix(in srgb,var(--accent) 12%,var(--paper));
  --card:color-mix(in srgb,var(--surface) 50%,var(--paper));
}

/* ---- site frame (same as privacy.html) ---- */
.skip-link{position:absolute;left:12px;top:-80px;z-index:100;padding:12px 18px;border-radius:10px;background:var(--ink);color:var(--paper);font:600 15px/1.2 system-ui,sans-serif;text-decoration:none}.skip-link:focus{top:12px}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Karla',system-ui,sans-serif;font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-underline-offset:3px}a:hover{opacity:.8}
.top{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px 24px;padding:16px clamp(20px,4vw,56px);background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:600}
.brand img{width:30px;height:30px;border-radius:8px}
.top nav{display:flex;flex-wrap:wrap;gap:8px}
.top nav a{color:var(--ink);text-decoration:none;font-size:14px;padding:7px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent)}
.top nav a[aria-current="page"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
main{max-width:760px;margin:0 auto;padding:clamp(48px,7vw,96px) clamp(20px,4vw,40px) clamp(64px,8vw,120px)}
h1{font-family:'DM Serif Display',serif;font-weight:400;font-size:clamp(40px,6vw,72px);line-height:1.02;letter-spacing:-.02em;margin:10px 0 20px;overflow-wrap:break-word}
h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:clamp(26px,3vw,36px);line-height:1.15;margin:48px 0 12px;padding-top:24px;border-top:1px solid var(--line);scroll-margin-top:96px}
h3{font-size:19px;margin:28px 0 8px}
ul,ol{padding-left:1.2em}li{margin:6px 0}
details{border-top:1px solid var(--line);padding:14px 0}summary{cursor:pointer;font-weight:600}
footer{border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent);padding:24px clamp(20px,4vw,56px);display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-size:14px;opacity:.85}
footer a{color:inherit}

/* ---- page title block ---- */
.wrap{max-width:none !important;margin:0;padding:0}
.page-head{margin:0 0 8px}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0;font-weight:600}
.lede{font-size:20px;opacity:.85;margin:0 0 14px}
.meta{font-size:15px;color:var(--muted)}
.gd-page-head .meta{margin:0}
.gd-crumbs{font-size:14px;margin:0 0 18px;opacity:.8}
.gd-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 8px}
.gd-crumbs li{margin:0}
.gd-crumbs li + li::before{content:"/";margin-right:8px;opacity:.6}
.gd-crumbs a{color:inherit}

/* ---- article body ---- */
.gd-article-body{margin:0}
.prose li strong{font-weight:700}
.gd-steps{padding-left:1.3em}
.gd-steps li{margin:10px 0}
.gd-steps li::marker{color:var(--accent);font-weight:700}

/* affirmation lines: soft quote style, no bullets */
.gd-lines{list-style:none;padding:0;margin:8px 0 28px}
.gd-lines li{margin:8px 0;padding:12px 18px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;font-family:'DM Serif Display',serif;font-size:20px;line-height:1.4}

/* gentle note, same tint as the privacy page callouts */
.gd-note{background:var(--soft);border-radius:16px;padding:18px 22px;margin:24px 0;font-size:16px}
.gd-note p{margin:0}.gd-note p + p{margin-top:10px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 22px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font:600 16px/1.2 'Karla',system-ui,sans-serif;text-decoration:none;cursor:pointer}
.btn:hover{opacity:.88}
.btn.secondary{background:transparent;color:var(--ink);border-color:color-mix(in srgb,var(--ink) 35%,transparent)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn[hidden]{display:none}

/* the one calm call to action */
.gd-cta{margin:56px 0 0;padding:32px clamp(22px,4vw,40px) 34px;text-align:center;border-radius:24px;background:var(--soft)}
.gd-cta h2{margin:0 0 10px;padding:0;border:0;font-size:clamp(24px,3vw,32px)}
.gd-cta p{max-width:34em;margin:0 auto 20px;opacity:.9}

/* more guides, at the end of each article */
.gd-more{margin-top:40px}
.gd-more h2{font-size:24px;margin:0 0 8px}
.gd-more ul{margin:0}

/* ---- guides index cards ---- */
.gd-guide-grid{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:640px){.gd-guide-grid{grid-template-columns:1fr 1fr}}
.gd-guide-grid > li{margin:0}
.card{height:100%;display:flex;flex-direction:column;padding:22px 24px 24px;background:var(--card);border:1px solid var(--line);border-radius:20px;transition:border-color .18s ease}
.card:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.card .eyebrow{margin-bottom:8px}
.card h2{font-size:24px;margin:0 0 6px;padding:0;border:0}
.card h2 a{color:var(--ink);text-decoration:none}
.card h2 a:hover{text-decoration:underline;opacity:1}
.card p{margin:0 0 10px;opacity:.85}
.card .meta{margin:auto 0 0;opacity:1;color:var(--muted);font-size:14px}
.card p.eyebrow{opacity:1}

/* ---- free kind line of the day ---- */
.kl-stage{position:relative;overflow:hidden;isolation:isolate;border-radius:24px;min-height:clamp(22rem,58vh,30rem);display:grid;place-items:center;padding:clamp(16px,4vw,40px);background:var(--soft) center / cover no-repeat}
.kl-stage[data-scene="calm"]{background-image:url("../assets/art/scene-calm.webp")}
.kl-stage[data-scene="selflove"]{background-image:url("../assets/art/scene-selflove.webp")}
.kl-stage[data-scene="rose"]{background-image:url("../assets/art/scene-rose.webp")}
.kl-stage[data-scene="joy"]{background-image:url("../assets/art/scene-joy.webp")}
.kl-stage[data-scene="confidence"]{background-image:url("../assets/art/scene-confidence.webp")}
.kl-stage[data-scene="healing"]{background-image:url("../assets/art/scene-healing.webp")}
.kl-stage::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--veil-a),var(--veil-b))}
.kl-card{width:min(100%,36rem);text-align:center;padding:clamp(22px,4vw,38px) clamp(18px,4vw,38px);border-radius:18px;background:color-mix(in srgb,var(--paper) 88%,transparent);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);border:1px solid color-mix(in srgb,var(--paper) 60%,transparent)}
.kl-date{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.kl-line{margin:0;font-family:'DM Serif Display',serif;font-weight:400;font-size:clamp(28px,4.4vw,38px);line-height:1.22;text-wrap:balance;overflow-wrap:break-word}
.kl-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:24px 0 0}
.kl-voice-note{margin:12px 0 0;font-size:13px;opacity:.75}
.kl-status{min-height:1.3em;margin:8px 0 0;font-size:14px}
.kl-below{margin:32px 0 0}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card{transition:none}}

/* ---- print: just the words ---- */
@media print{
  .top,footer,.skip-link,.gd-cta,.gd-more,.kl-actions,.kl-voice-note,.kl-status{display:none !important}
  body{background:#fff;color:#000;font-size:12pt}
  main{max-width:none;padding:0}
  a{color:#000}
  h2{break-after:avoid;border-top:0;padding-top:0}
  .gd-lines li,.gd-note,.card{background:#fff;border:1px solid #bbb;break-inside:avoid}
  .kl-stage{background:none !important;min-height:0;padding:0}
  .kl-card{background:#fff;border:1px solid #bbb;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ==========================================================================
   Article layout v2 (blog-style rollout, 23 Sep; same pattern as the Streaks
   Garden and MoonEase pilot): title band with topic chips and byline, featured
   image, sticky "On this page" contents with share buttons, in-body visuals,
   and related cards with images. Only pages with <main class="post"> use the
   article rules; .gd-card-img is also used on the guides index.
   ========================================================================== */
main.post{max-width:none;margin:0;padding:0}
.post-band{padding:clamp(36px,6vw,80px) clamp(20px,4vw,56px) clamp(32px,5vw,60px);border-bottom:1px solid var(--line);
  background:radial-gradient(ellipse 70% 90% at 88% 0%,color-mix(in srgb,var(--gold) 14%,transparent),transparent 70%),
             linear-gradient(180deg,color-mix(in srgb,var(--accent) 8%,var(--paper)),var(--paper))}
.post-band-inner{max-width:1120px;margin:0 auto}
.post-band-text{max-width:820px}
.post-band .gd-crumbs{margin-bottom:22px}
.post-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.post-chips li{margin:0;font-size:13px;line-height:1.2;padding:6px 12px;border-radius:999px;color:var(--ink);
  background:color-mix(in srgb,var(--surface) 50%,transparent);border:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.post-chips li:first-child{color:var(--on-accent);background:var(--accent);border-color:var(--accent);font-weight:600}
.post-band h1{margin:18px 0 18px;max-width:20ch;text-wrap:balance}
.post-band .lede{max-width:640px}
.post-byline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:22px 0 0;font-size:14.5px;color:color-mix(in srgb,var(--ink) 78%,transparent)}
.post-byline > span{display:inline-flex;align-items:center;gap:7px}
.post-byline img{width:30px;height:30px;border-radius:50%}
.post-byline .post-by{color:var(--ink);font-weight:600}
.post-byline svg{width:16px;height:16px;flex:none;opacity:.8}

.post-layout{max-width:1120px;margin:0 auto;padding:clamp(28px,5vw,56px) clamp(20px,4vw,40px) clamp(64px,8vw,120px);display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.post-content{min-width:0;max-width:760px}
.post-content h2[id]{scroll-margin-top:96px}
.post-hero{margin:0 0 36px;border-radius:20px;overflow:hidden;aspect-ratio:16/9;background:var(--soft);border:1px solid var(--line)}
.post-hero img{display:block;width:100%;height:100%;object-fit:cover}

/* Contents + share. Phones: a small closed box above the article. Desktop: sticky left column. */
.post-aside{min-width:0}
.post-toc{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:4px 16px}
.post-toc-toggle{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;width:100%;font:inherit;text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:44px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.post-toc-toggle:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:6px}
.post-toc-toggle::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.post-toc.is-open .post-toc-toggle::after{transform:rotate(225deg) translateY(-2px)}
.post-toc ol{list-style:none;margin:0 0 12px;padding:0;border-left:1px solid var(--line)}
.post-toc li{margin:0}
.post-toc.is-collapsible:not(.is-open) ol{display:none}
.post-toc a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;font-size:14.5px;line-height:1.4;color:color-mix(in srgb,var(--ink) 72%,transparent);text-decoration:none}
.post-toc a:hover{color:var(--ink);opacity:1}
.post-toc a.is-current{color:var(--ink);font-weight:600;border-left-color:var(--accent)}
.post-share{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.post-share-label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 74%,transparent);margin-right:4px}
.post-share a,.post-share button{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;padding:0;cursor:pointer;color:var(--ink);background:transparent;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);font:inherit}
.post-share a:hover,.post-share button:hover{border-color:var(--accent);color:var(--accent);opacity:1}
.post-share svg{width:17px;height:17px}
.post-share-status{font-size:13px;color:var(--accent);min-height:1em}
@media (min-width:1080px){
  .post-band-text{margin-left:calc(220px + 56px)}
  .post-layout{grid-template-columns:220px minmax(0,760px);gap:56px;justify-content:center}
  .post-aside{grid-column:1;grid-row:1}
  .post-content{grid-column:2;grid-row:1}
  .post-aside-inner{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto;padding-bottom:12px}
  .post-toc{border:0;background:none;padding:0;border-radius:0}
  .post-toc-toggle{cursor:default;min-height:0;margin:0 0 12px}
  .post-toc-toggle::after{display:none}
  .post-share{margin-top:28px}
}

/* In-body visuals */
.post-figure{margin:32px 0;padding:clamp(18px,3vw,26px);border-radius:18px;background:var(--card);border:1px solid var(--line)}
.post-figure-title{font-family:'DM Serif Display',serif;font-weight:400;font-size:clamp(22px,2.4vw,26px);line-height:1.2;margin:0 0 4px}
.post-figure-sub{font-size:14.5px;opacity:.75;margin:0 0 18px}
.post-figure figcaption{font-size:14px;line-height:1.55;opacity:.8;margin-top:16px}
.post-callout{margin:28px 0;padding:18px 22px;border-radius:16px;border-left:3px solid var(--accent);background:var(--soft)}
.post-callout p{margin:0}
.post-callout .post-callout-lead{font-family:'DM Serif Display',serif;font-size:clamp(23px,2.6vw,28px);line-height:1.2;margin-bottom:6px}

/* Numbered steps as a timeline */
.ktm-steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:0}
.ktm-steps li{margin:0;position:relative;padding:0 0 18px 52px;counter-increment:s}
.ktm-steps li:last-child{padding-bottom:0}
.ktm-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);font:700 14px/1 'Karla',system-ui,sans-serif}
.ktm-steps li::after{content:"";position:absolute;left:16px;top:38px;bottom:4px;width:2px;background:color-mix(in srgb,var(--accent) 25%,transparent)}
.ktm-steps li:last-child::after{display:none}
.ktm-steps b{display:block;font-size:16.5px;line-height:1.35;padding-top:5px}
.ktm-steps span{display:block;font-size:14.5px;line-height:1.5;opacity:.82}
.ktm-steps small{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);margin-left:8px}

/* Two columns: swap this for this / can and cannot */
.ktm-swap{display:grid;gap:10px;grid-template-columns:1fr}
.ktm-swap-row{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);align-items:center;gap:8px}
.ktm-swap-row p{margin:0;padding:12px 14px;border-radius:12px;font-family:'DM Serif Display',serif;font-size:18px;line-height:1.3}
.ktm-swap-row .from{background:var(--surface);border:1px dashed color-mix(in srgb,var(--ink) 25%,transparent);color:color-mix(in srgb,var(--ink) 70%,transparent)}
.ktm-swap-row .to{background:var(--soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.ktm-swap-row svg{width:22px;height:22px;color:var(--accent);justify-self:center}
.ktm-swap-head{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);gap:8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.ktm-swap-head span:first-child{color:color-mix(in srgb,var(--ink) 72%,transparent)}
@media (max-width:560px){
  .ktm-swap-row,.ktm-swap-head{grid-template-columns:1fr}
  .ktm-swap-head span:nth-child(2),.ktm-swap-head span:nth-child(3){display:none}
  .ktm-swap-row svg{transform:rotate(90deg);height:18px}
}
.ktm-two{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:600px){.ktm-two{grid-template-columns:1fr 1fr}}
.ktm-two > div{padding:16px 18px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.ktm-two h3{margin:0 0 8px;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.ktm-two ul{list-style:none;margin:0;padding:0}
.ktm-two li{margin:0;padding:6px 0 6px 30px;position:relative;font-size:15px;line-height:1.45}
.ktm-two li svg{position:absolute;left:0;top:7px;width:20px;height:20px}
.ktm-two .can li svg{color:var(--accent)}
.ktm-two .cannot li svg{color:var(--gold)}

/* A ladder: what helps, in order */
.ktm-ladder{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ktm-ladder li{margin:0;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--accent) calc(var(--k) * 22%),var(--surface));border:1px solid var(--line);margin-left:calc(var(--i) * 14px)}
.ktm-ladder b{font-size:15.5px;line-height:1.35}
.ktm-ladder span{font-size:14px;opacity:.8}
.ktm-ladder i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--accent)}
@media (max-width:520px){.ktm-ladder li{margin-left:0;flex-wrap:wrap}}

/* Formula card: after I ..., I will ... */
.ktm-formula{margin:0;font-family:'DM Serif Display',serif;font-size:clamp(22px,3vw,30px);line-height:1.35;text-wrap:balance}
.ktm-formula span{display:inline-block;padding:0 10px;border-radius:10px;background:var(--soft);border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent);color:var(--accent)}
.ktm-examples{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.ktm-examples li{margin:0;padding:10px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:15px}
.ktm-examples b{color:var(--accent)}

/* A week of dots */
.ktm-week{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;max-width:460px}
.ktm-week li{margin:0;text-align:center;font-size:12px;opacity:.85}
.ktm-week li::before{content:"";display:block;aspect-ratio:1;border-radius:50%;background:var(--accent);margin-bottom:6px}
.ktm-week li.miss::before{background:transparent;border:2px dashed color-mix(in srgb,var(--ink) 45%,transparent)}
.ktm-week li.plan::before{background:var(--gold)}

/* Breath: in, then a longer out */
.ktm-breath{display:block;width:100%;height:auto;max-width:560px}
.ktm-breath .wave{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.ktm-breath .fillin{fill:color-mix(in srgb,var(--accent) 12%,transparent)}
.ktm-breath text{font:600 13px 'Karla',system-ui,sans-serif;fill:var(--ink)}
.ktm-breath .muted{fill:color-mix(in srgb,var(--ink) 72%,transparent);font-weight:400}

/* Evidence list card */
.ktm-evidence{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ktm-evidence li{margin:0;display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:15px;line-height:1.45}
.ktm-evidence li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:5px;border:2px solid var(--accent)}

/* Related cards with images */
.post-related{margin-top:48px}
.post-related h2{margin:0 0 16px}
.post-cards{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:560px){.post-cards{grid-template-columns:1fr 1fr}}
.post-cards li{margin:0}
.post-card{display:flex;flex-direction:column;height:100%;border-radius:18px;overflow:hidden;background:var(--card);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color .2s,transform .2s}
.post-card:hover{opacity:1;border-color:color-mix(in srgb,var(--accent) 45%,transparent);transform:translateY(-2px)}
.post-card-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--soft)}
.post-card-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.post-card:hover .post-card-img img{transform:scale(1.04)}
.post-card-body{display:block;padding:16px 18px 18px}
.post-card-body .eyebrow{font-size:11.5px;margin-bottom:6px}
.post-card-title{display:block;font-family:'DM Serif Display',serif;font-size:22px;line-height:1.2}
.post-card-meta{display:block;font-size:13px;opacity:.65;margin-top:8px}

/* Guides index cards with images */
.card.has-img{padding:0;overflow:hidden}
.gd-card-img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--soft)}
.gd-card-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.card.has-img:hover .gd-card-img img{transform:scale(1.04)}
.card.has-img .gd-card-text{display:flex;flex-direction:column;flex:1;padding:18px 22px 22px}
.gd-guide-grid-one{margin-top:14px;grid-template-columns:1fr !important}
@media (min-width:640px){
  .card.gd-card-wide{flex-direction:row}
  .gd-card-wide .gd-card-img{flex:0 0 46%}
  .gd-card-wide .gd-card-text{justify-content:center}
}

/* Free tool: featured image and share row */
.tool-hero{margin:0 0 28px;border-radius:20px;overflow:hidden;aspect-ratio:21/9;background:var(--soft);border:1px solid var(--line)}
.tool-hero img{display:block;width:100%;height:100%;object-fit:cover}
.tool-share{justify-content:center;margin:22px 0 0}

@media (prefers-reduced-motion:reduce){.post-card,.post-card:hover,.post-card-img img,.gd-card-img img{transition:none;transform:none!important}}
@media print{
  .post-aside,.post-share,.post-related,.tool-share{display:none!important}
  .post-band{background:none;padding:0}
  .post-band-text{margin-left:0}
  .post-layout{display:block;padding:0}
  .post-hero,.tool-hero{border:0}
  .post-figure{background:#fff;border:1px solid #bbb;break-inside:avoid}
}
.kl-below-hero{margin:28px 0 0}
/* Four findings, side by side */
.ktm-cards{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.ktm-cards li{margin:0;padding:14px 16px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent)}
.ktm-cards li.warn{border-top-color:var(--gold)}
.ktm-cards small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.ktm-cards li.warn small{color:var(--gold-ink)}
.ktm-cards b{display:block;font-family:'DM Serif Display',serif;font-weight:400;font-size:19px;line-height:1.25;margin-bottom:6px}
.ktm-cards span{display:block;font-size:14.5px;line-height:1.5;opacity:.85}
/* Short night lines with a word count */
.ktm-count{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ktm-count li{margin:0;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.ktm-count q{font-family:'DM Serif Display',serif;font-size:18px;line-height:1.35;quotes:none}
.ktm-count span{flex:none;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--accent);background:var(--soft);border-radius:999px;padding:4px 10px}
@media (min-width:560px){.ktm-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.post-figure-title + :not(.post-figure-sub){margin-top:16px}
.ktm-week{max-width:360px}

/* ==========================================================================
   Light / dark theme (23 Sep): the same moon/sun toggle, storage key
   ("ktm-theme") and dark palette as index.html, so a visitor's choice carries
   between the landing page and the guides. Light stays the default.
   Every colour above reads from the tokens, so dark only swaps tokens here.
   The dark tokens are screen-only: printing always stays light on white paper.
   ========================================================================== */
body{transition:background-color .3s ease,color .3s ease}
.top-end{display:flex;align-items:center;gap:8px 10px}
.theme-btn{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;padding:0}
.theme-btn:hover{border-color:var(--accent);color:var(--accent)}
.theme-btn .moon{display:block}.theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:none}:root[data-theme="dark"] .theme-btn .sun{display:block}
/* phones: the toggle sits on the brand row, like the landing page; the nav pills wrap below */
@media (max-width:640px){.top-end{display:contents}.top .brand{flex:1 1 auto;min-width:0}.theme-btn{order:1;width:40px;height:40px}.top-end nav{order:2;flex:1 1 100%}}
.post-hero img,.post-card-img img,.gd-card-img img,.tool-hero img{filter:var(--img-filter)}
.ktm-breath .gold{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-dasharray:2 6}
@media screen{
  :root[data-theme="dark"]{
    color-scheme:dark;
    --paper:#0e1f1c;
    --ink:#e6f2ee;
    --muted:#b0c9c2;
    --accent:#6fcfbd;
    --on-accent:#0b2420;
    --gold:#e8bd62;
    --gold-ink:#e8bd62;
    --surface:#1b3833;
    --card:#15302b;
    --soft:#1b3b35;
    --veil-a:rgba(0,0,0,.12);
    --veil-b:rgba(0,0,0,.34);
    --img-filter:brightness(.92) saturate(.95);
  }
  /* the shared footer carries an inline light-theme colour */
  :root[data-theme="dark"] footer nav[aria-label="More apps from JPott Studios"]{color:var(--muted) !important}
}
@media print{.theme-btn{display:none !important}}

.post-photo{margin:36px 0;padding:0;border:0;background:none}.post-photo img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:20px}.post-photo figcaption{text-align:left}

/* article calls to action (article_ctas.py) */
.jp-mid-cta{display:flex;align-items:center;gap:16px;margin:36px 0;padding:18px 20px;border-radius:20px;background:var(--card);border:1px solid var(--line)}
.jp-mid-cta img{flex:none;width:56px;height:56px;border-radius:14px}
.jp-mid-cta .jp-mid-txt{flex:1;min-width:0}
.jp-mid-cta .jp-mid-t{margin:0;font-weight:700;font-size:17px;line-height:1.3}
.jp-mid-cta .jp-mid-s{margin:2px 0 0;font-size:14.5px;line-height:1.45;opacity:.78}
.jp-mid-cta .btn{flex:none;white-space:nowrap}
@media (max-width:560px){.jp-mid-cta{flex-wrap:wrap}.jp-mid-cta .btn{width:100%}}
.jp-cta-more{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:14px}
.jp-cta-more .jp-badge{display:inline-flex;line-height:0;border-radius:8px}
.jp-cta-more .jp-badge img{height:44px;width:auto}
.jp-cta-more .jp-web{font-size:14.5px;font-weight:600;color:inherit;text-underline-offset:3px}
.jp-sticky{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.18);transform:translateY(140%);transition:transform .35s ease}
.jp-sticky.on{transform:none}
.jp-sticky img{width:36px;height:36px;border-radius:9px;flex:none}
.jp-sticky .jp-st-name{flex:1;min-width:0;font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jp-sticky .btn{min-height:40px;padding:8px 16px;white-space:nowrap}
.jp-sticky .jp-st-x{flex:none;width:36px;height:36px;border:0;background:none;color:inherit;font-size:22px;line-height:1;cursor:pointer;opacity:.6}
@media (min-width:761px){.jp-sticky{display:none}}
@media (prefers-reduced-motion:reduce){.jp-sticky{transition:none}}
.gd-cta .jp-cta-more{justify-content:center}

/* ---------- one matching social video near the top of each article ---------- */
main figure.jp-video,article figure.jp-video{margin:2.2rem auto !important;padding:0 !important;max-width:360px;background:none !important;border:0 !important;text-align:center}
figure.jp-video video{display:block;width:100%;height:auto;aspect-ratio:9/16;border-radius:18px;background:#000;border:1px solid var(--line);box-shadow:0 10px 30px rgba(31,58,54,.28)}
figure.jp-video figcaption{margin-top:.8rem;font-size:1rem;line-height:1.4;color:inherit;opacity:.8}
@media print{figure.jp-video{display:none !important}}
.jp-top-cta{display:flex;align-items:center;gap:12px;margin:18px 0 0;padding:10px 12px;border-radius:16px;background:var(--card);border:1px solid var(--line);max-width:560px}
.jp-top-cta img{flex:none;width:40px;height:40px;border-radius:10px}
.jp-top-cta .jp-top-txt{flex:1;min-width:0;font-size:14.5px;line-height:1.35}
.jp-top-cta .jp-top-txt b{display:block;font-size:15.5px}
.jp-top-cta .btn{flex:none;white-space:nowrap;min-height:40px;padding:8px 16px}
@media (max-width:420px){.jp-top-cta{flex-wrap:wrap}.jp-top-cta .btn{width:100%}}