/* Softly Noted guides and free printable mood tracker.
   One standalone stylesheet in the site design (redesign e36643829): same fonts, palette,
   header and footer as index.html and privacy.html. No shared/app.css.
   Font urls are relative to this file. */

@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(../assets/fonts/HankenGrotesk-normal-400_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}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 600;font-display:swap;src:url(../assets/fonts/Newsreader-italic-300_600.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:'Newsreader';font-style:normal;font-weight:300 600;font-display:swap;src:url(../assets/fonts/Newsreader-normal-300_600.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}

/* Themes: light is the default, like index.html. The sun/moon button in the header sets
   data-theme="dark" on <html> (or removes it for light) and saves localStorage "sn-theme",
   shared with the landing page. Dark values come from index.html's :root[data-theme="dark"] palette. */
:root{
  --bg:#f7f2ee; --ink:#2b2830; --accent:#74659c; --muted:#5d5866;
  --line:color-mix(in srgb,var(--ink) 14%,transparent);
  --line-soft:color-mix(in srgb,var(--ink) 10%,transparent);
  --line-2:rgba(43,40,48,.22);
  --panel:color-mix(in srgb,var(--accent) 12%,var(--bg));
  --card:color-mix(in srgb,#ffffff 60%,var(--bg));
  --field:#fff; --chip-bg:color-mix(in srgb,#ffffff 55%,transparent);
  --band-warm:color-mix(in srgb,#e8b8a0 26%,transparent);
  --foot:#545153; --foot-name:#2b2830; --foot-sub:#4a4650;
  --accent-ink:#5e5085;
  --serif:'Newsreader',serif; --sans:'Hanken Grotesk',system-ui,sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#1b1920; --ink:#f2ede8; --accent:#b9aae8; --muted:#cdc5d1;
  --line-2:rgba(242,237,232,.24);
  --panel:color-mix(in srgb,var(--accent) 11%,var(--bg));
  --card:#26222d;
  --field:#302b38; --chip-bg:rgba(255,255,255,.055);
  --band-warm:color-mix(in srgb,#eeaabb 13%,transparent);
  --foot:#aaa3ae; --foot-name:#f2ede8; --foot-sub:#cdc5d1;
  --accent-ink:#cabff3;
  color-scheme:dark;
}

/* ---------- 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(--bg);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}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-underline-offset:3px}a:hover{opacity:.8}
img{max-width:100%}
.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(--bg) 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]{background:var(--ink);color:var(--bg);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:var(--serif);font-weight:400;font-size:clamp(44px,6vw,80px);line-height:1;letter-spacing:-.02em;margin:10px 0 20px}
h2{font-family:var(--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)}
h3{font-size:19px;line-height:1.35;margin:28px 0 8px}
p{margin:0 0 16px}
ul,ol{padding-left:1.2em}li{margin:6px 0}
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}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- page head ---------- */
.gd-page-head{margin:0 0 8px}
.gd-crumbs{font-size:14px;color:var(--muted);margin:0 0 28px}
.gd-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 10px}
.gd-crumbs li{margin:0}
.gd-crumbs li+li::before{content:"/";margin-right:10px;opacity:.6}
.gd-crumbs a{color:inherit}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0}
.lede{font-size:20px;line-height:1.55;opacity:.85;margin:0 0 14px}
.meta{font-size:15px;color:var(--muted)}
.gd-page-head .meta{margin:0}

/* ---------- article body ---------- */
.gd-article-body{padding-top:8px}
.prose > h2:first-child{margin-top:32px}
.prose strong{font-weight:600}
.prose ul li::marker{color:var(--accent)}
.prose ol li::marker{color:var(--accent);font-weight:600}
blockquote{margin:20px 0;padding:4px 0 4px 20px;border-left:2px solid var(--accent);font-family:var(--serif);font-size:22px;line-height:1.4}

/* Numbered prompt lists: calm serif numbers, generous spacing. */
.gd-prompts{list-style:none;counter-reset:gd;padding:0;margin:8px 0 28px}
.gd-prompts li{counter-increment:gd;position:relative;padding:10px 0 10px 46px;margin:0;border-top:1px dashed var(--line)}
.gd-prompts li:first-child{border-top:0}
.gd-prompts li::before{content:counter(gd);position:absolute;left:0;top:10px;min-width:32px;text-align:right;font-family:var(--serif);font-size:21px;line-height:1.3;color:var(--accent);font-variant-numeric:tabular-nums}

.gd-steps{padding-left:1.3em}
.gd-steps li{margin:10px 0}

.gd-note{background:var(--panel);border-radius:16px;padding:18px 22px;margin:20px 0;font-size:16px}
.gd-note p:last-child{margin-bottom:0}

/* FAQ block */
.gd-faq h3{padding-top:18px;border-top:1px solid var(--line-soft)}
.gd-faq h2 + h3{border-top:0;padding-top:0}

/* The one calm call to action. */
.gd-cta{margin:48px 0 0;padding:26px 26px 28px;border-radius:20px;background:var(--panel)}
.gd-cta h2{margin:0 0 10px;padding:0;border:0;font-size:clamp(26px,3vw,34px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);font:600 16px/1.2 var(--sans);text-decoration:none;cursor:pointer}
.btn:hover{opacity:.88}

/* Related guides */
.gd-more{margin-top:40px}
.gd-more h2{margin:0 0 10px;padding-top:24px;font-size:26px}
.gd-more ul{padding-left:1.2em}

/* ---------- guides index cards ---------- */
.gd-guide-grid{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:640px){.gd-guide-grid{grid-template-columns:1fr 1fr}}
.gd-guide-grid > li{margin:0}
.card{background:var(--card);border:1px solid var(--line-soft);border-radius:18px;padding:22px 22px 20px}
.gd-guide-grid .card{height:100%;display:flex;flex-direction:column;transition:border-color .2s}
.gd-guide-grid .card:hover,.gd-guide-grid .card:focus-within{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.gd-guide-grid .eyebrow{margin-bottom:8px;font-size:12px}
.gd-guide-grid h2{margin:0 0 8px;padding:0;border:0;font-size:27px;line-height:1.12}
.gd-guide-grid h2 a{color:var(--ink);text-decoration:none}
.gd-guide-grid h2 a:hover{color:var(--accent);opacity:1}
.gd-guide-grid p{font-size:15.5px;line-height:1.6;opacity:.88}
.gd-guide-grid .meta{margin:auto 0 0;font-size:13px}

/* ---------- free printable mood tracker ---------- */
main:has(.mt-tool){max-width:1160px}
main:has(.mt-tool) .gd-page-head,main:has(.mt-tool) .gd-cta,main:has(.mt-tool) .gd-article-body > .wrap > .meta,main:has(.mt-tool) .prose{max-width:760px}
.mt-tool{display:grid;gap:20px;grid-template-columns:1fr;align-items:start;margin-top:8px}
@media (min-width:960px){.mt-tool{grid-template-columns:300px 1fr;gap:28px}}
.mt-form fieldset{border:0;margin:0 0 20px;padding:0;min-width:0}
.mt-form legend{display:block;font-weight:600;font-size:16px;margin:0 0 8px;padding:0}
.mt-row{display:flex;flex-wrap:wrap;gap:10px}
.mt-field{display:flex;flex-direction:column;gap:4px;flex:1 1 7rem}
.mt-field span{font-size:13px;color:var(--muted)}
.mt-select{min-height:44px;padding:9px 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--ink) 24%,transparent);background:var(--field);color:var(--ink);font:inherit;font-size:16px;width:100%}
.mt-select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mt-options{display:flex;flex-wrap:wrap;gap:8px}
.mt-option{position:relative}
.mt-option input{position:absolute;opacity:0;width:1px;height:1px}
.mt-option span{display:inline-flex;align-items:center;gap:8px;cursor:pointer;min-height:44px;padding:8px 16px;border-radius:999px;font-weight:600;font-size:15px;border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);background:var(--field);color:var(--ink)}
.mt-option span::before{content:"";width:13px;height:13px;flex:none;border-radius:50%;border:2px solid color-mix(in srgb,var(--ink) 40%,transparent);background:var(--field)}
.mt-option input:checked + span{background:color-mix(in srgb,var(--accent) 14%,var(--field));border-color:var(--accent)}
.mt-option input:checked + span::before{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--field)}
.mt-option input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.mt-form .btn{width:100%}
.mt-hint{font-size:14px;color:var(--muted);margin:10px 0 0}

/* The sheet reads as paper on screen and fits one page in print. */
.mt-sheet.card{background:#fff;padding:clamp(16px,3vw,28px)}
.mt-sheet-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin:0 0 14px}
.mt-sheet-head h2{margin:0;padding:0;border:0;font-size:clamp(28px,4vw,40px)}
.mt-sheet-head p{margin:0;color:var(--muted);font-size:15px}
.mt-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin:0 0 20px}
.mt-dow{text-align:center;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:2px 0 4px}
.mt-day{position:relative;aspect-ratio:1/1;min-width:0;border:1px solid var(--line);border-radius:10px;background:#fff;display:grid;place-items:center}
.mt-day.is-empty{border-style:dashed;background:transparent;opacity:.5}
.mt-day b{position:absolute;top:4px;left:7px;font-size:12px;font-weight:600;color:#4a4650;font-variant-numeric:tabular-nums}
.mt-day i{display:block;width:58%;aspect-ratio:1/1;border-radius:50%;margin-top:8px;border:1.5px solid color-mix(in srgb,var(--ink) 28%,transparent)}
@media (max-width:480px){
  .mt-grid{gap:3px}
  .mt-day{border-radius:6px}
  .mt-day b{font-size:10px;top:1px;left:3px}
  .mt-day i{position:absolute;right:12%;bottom:10%;width:52%;margin:0;border-width:1px}
  .mt-dow{font-size:10px;letter-spacing:0}
}
.mt-key h3,.mt-notes h3{font-family:var(--sans);font-size:15px;font-weight:600;margin:0 0 4px;color:var(--accent)}
.mt-key > p{font-size:14px;color:var(--muted);margin:0 0 10px}
.mt-key ul{list-style:none;margin:0;padding:0;display:grid;gap:6px 14px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.mt-key li{display:flex;align-items:center;gap:8px;min-width:0;margin:0;font-size:15px}
.mt-key img{width:32px;height:32px;flex:none}
.mt-key .mt-name{flex:1 1 auto;min-width:0}
.mt-swatch{width:24px;height:18px;flex:none;border:1.5px solid color-mix(in srgb,var(--ink) 32%,transparent);border-radius:4px;background:#fff}
.mt-notes{margin-top:20px}
.mt-lines{margin:4px 0 0}
.mt-lines span{display:block;height:30px;border-bottom:1px solid var(--line)}
.mt-foot{font-size:13px;color:var(--muted);margin:14px 0 0}

/* ---------- print: plain white paper, only the sheet ---------- */
@media print{
  @page{margin:11mm}
  html,body{background:#fff!important;color:#222}
  .top,footer,.skip-link,.gd-page-head,.mt-form,.gd-cta,.gd-no-print,noscript{display:none!important}
  main,main:has(.mt-tool){max-width:none;padding:0;margin:0}
  .gd-article-body{padding:0}
  .mt-tool{display:block;margin:0}
  .card,.mt-sheet.card{background:#fff;border:0;border-radius:0;padding:0}
  .mt-sheet,.mt-sheet *{color:#222!important}
  .mt-sheet-head h2{font-size:24pt}
  .mt-grid{gap:1.2mm;margin-bottom:4mm}
  .mt-day{aspect-ratio:auto;height:21mm;border:.3mm solid #999;border-radius:1.5mm;background:#fff}
  .mt-day.is-empty{border:.3mm dashed #ccc;opacity:1}
  .mt-day b{font-size:8pt}
  .mt-day i{width:13mm;height:13mm;margin-top:2.5mm;border:.3mm solid #888}
  .mt-key ul{grid-template-columns:repeat(5,1fr);gap:1.5mm 2.5mm}
  .mt-key li{font-size:8.5pt;gap:1.5mm}
  .mt-key img{width:6mm;height:6mm;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .mt-swatch{width:5mm;height:4mm;border:.3mm solid #666;background:#fff}
  .mt-lines span{height:7mm;border-bottom:.3mm solid #bbb}
  .mt-key,.mt-notes{break-inside:avoid}
  a{color:#000;text-decoration:none}
  h2{border-top-color:#ccc}
}

/* ==========================================================================
   Article layout v2 (rollout, 23 Sep): the same "post" layout as the pilot on
   Planted Habits and MoonEase, in Softly Noted's cream and plum palette.
   Title band with topic chips and byline, featured image, sticky "On this page"
   contents with share buttons, in-body diagrams, a callout, related cards with
   images. Only pages with <main class="post"> use these rules.
   ========================================================================== */
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-soft);
  background:radial-gradient(ellipse 60% 90% at 90% 0%,var(--band-warm),transparent 70%),
             radial-gradient(ellipse 60% 80% at 60% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%),
             linear-gradient(180deg,color-mix(in srgb,var(--accent) 6%,var(--bg)),var(--bg))}
.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:14px 0 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:var(--chip-bg);border:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.post-chips li:first-child{color:var(--bg);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:var(--muted)}
.post-byline > span{display:inline-flex;align-items:center;gap:7px}
.post-byline img{width:30px;height:30px;border-radius:50%;background:var(--card)}
.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(--panel);border:1px solid var(--line-soft)}
.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-soft);border-radius:16px;background:var(--card);padding:4px 16px}
.post-toc-title{display:none}
.post-toc-toggle{appearance:none;background:none;border:0;padding:0;margin:0;width:100%;font:inherit;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:44px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);text-align:left}
.post-toc-toggle::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(225deg) translateY(-2px);transition:transform .2s}
.post-toc.is-collapsed .post-toc-toggle::after{transform:rotate(45deg) translateY(-3px)}
.post-toc.is-collapsed ol{display:none}
.post-toc-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.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 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:var(--muted);text-decoration:none}
.post-toc a:hover{color:var(--ink);opacity:1}
.post-toc a.is-current{color:var(--ink);border-left-color:var(--accent);font-weight:600}
.post-share{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.post-share-label{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);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{display:none}
  .post-toc.is-collapsed ol{display:block}
  .post-toc-title{display:block;margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
  .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-soft)}
.post-figure-title{font-family:var(--serif);font-size:clamp(22px,2.4vw,26px);line-height:1.2;margin:0 0 4px}
.post-figure-sub{font-size:14.5px;color:var(--muted);margin:0 0 18px}
.post-figure figcaption{font-size:14px;line-height:1.55;color:var(--muted);margin-top:16px}

/* Callout */
.post-callout{margin:28px 0;padding:18px 22px;border-radius:16px;border-left:3px solid var(--accent);background:var(--panel)}
.post-callout p{margin:0}
.post-callout .post-callout-lead{font-family:var(--serif);font-size:clamp(24px,2.6vw,30px);line-height:1.2;color:var(--ink);margin-bottom:6px}

/* Related cards with images */
.post-related{margin-top:48px}
.post-related h2{margin:0 0 16px;padding-top:24px;font-size:clamp(26px,3vw,32px)}
.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-soft);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) 55%,transparent);transform:translateY(-2px)}
.post-card-img{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--panel)}
.post-card-img img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block}
.post-card-body{padding:16px 18px 18px}
.post-card-body .eyebrow{font-size:11.5px;margin-bottom:6px}
.post-card-title{display:block;font-family:var(--serif);font-size:23px;line-height:1.15}
.post-card-meta{display:block;font-size:13px;color:var(--muted);margin-top:8px}

@media print{
  .post-aside,.post-share,.post-related{display:none!important}
  .post-band{background:none;padding:0}
  .post-band-text{margin-left:0}
  .post-layout{display:block;padding:0}
  .post-hero{border:0}
}

/* ==========================================================================
   Rollout additions (23 Sep): reusable in-body visuals, photo cards,
   guide index card images and the free tool's featured image.
   Colours come from the palette tokens in :root.
   ========================================================================== */
.post-figure > :last-child{margin-bottom:0}

/* Flow: boxes joined by arrows. A column on phones, a row from 640px. */
.post-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.post-flow li{position:relative;margin:0;padding:14px 16px;border-radius:14px;background:var(--panel);font-size:16px;line-height:1.45}
.post-flow li small{display:block;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 4px}
.post-flow li+li::before{content:"";position:absolute;left:50%;top:-11px;width:9px;height:9px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:translate(-50%,-50%) rotate(45deg)}
@media (min-width:640px){
  .post-flow{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:30px}
  .post-flow li+li::before{left:-15px;top:50%;transform:translate(-50%,-50%) rotate(-45deg)}
}

/* Timeline: dots on a line. */
.post-timeline{list-style:none;margin:0;padding:0}
.post-timeline li{position:relative;margin:0;padding:0 0 18px 32px;font-size:16px;line-height:1.45}
.post-timeline li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:var(--accent)}
.post-timeline li::after{content:"";position:absolute;left:7px;top:24px;bottom:2px;width:2px;background:color-mix(in srgb,var(--accent) 35%,transparent)}
.post-timeline li:last-child{padding-bottom:0}
.post-timeline li:last-child::after{display:none}
.post-timeline b{display:block;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 2px}
.post-timeline li.is-later::before{background:transparent;border:2px dashed color-mix(in srgb,var(--ink) 50%,transparent)}

/* Comparison table with checks. */
.post-table-wrap{overflow-x:auto}
.post-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.4}
.post-table th,.post-table td{padding:11px 8px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:middle}
.post-table th:first-child{padding-left:0}
.post-table thead th{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border-bottom-color:var(--line)}
.post-table tbody th{font-weight:400}
.post-table .c{text-align:center;width:24%}
.post-table tbody tr:last-child > *{border-bottom:0}
.post-yes{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--bg);vertical-align:middle}
.post-yes svg{width:14px;height:14px}
.post-no{display:inline-block;width:12px;height:12px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--ink) 35%,transparent);vertical-align:middle}

/* Two sorted columns. */
.post-sort{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){.post-sort{grid-template-columns:repeat(2,minmax(0,1fr))}}
.post-sort > div{border-radius:14px;padding:14px 16px;background:var(--panel)}
.post-sort > div + div{background:transparent;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.post-sort-head{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 4px}
.post-sort ul{list-style:none;margin:0;padding:0}
.post-sort li{margin:0;padding:7px 0;border-top:1px dashed var(--line);font-size:15.5px;line-height:1.4}
.post-sort li:first-child{border-top:0}

/* Range bar with an average marker. */
.post-range{margin:4px 0 0}
.post-range-top{position:relative;height:58px}
.post-range-avg{position:absolute;bottom:8px;transform:translateX(-50%);text-align:center;font-size:13px;line-height:1.25;white-space:nowrap}
.post-range-avg b{display:block;font-family:var(--serif);font-weight:400;font-size:28px;line-height:1;color:var(--accent)}
.post-range-track{position:relative;height:12px;border-radius:999px;background:color-mix(in srgb,var(--ink) 10%,transparent)}
.post-range-fill{position:absolute;top:0;bottom:0;border-radius:999px;background:color-mix(in srgb,var(--accent) 45%,transparent)}
.post-range-dot{position:absolute;top:50%;width:20px;height:20px;border-radius:50%;background:var(--accent);border:3px solid var(--bg);transform:translate(-50%,-50%)}
.post-range-myth{position:absolute;top:-9px;bottom:-9px;border-left:2px dashed var(--ink);opacity:.75}
.post-range-ends{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-size:13px;line-height:1.3}
.post-range-ends span:last-child{text-align:right}
.post-range-ends b{display:block;font-size:15px}
.post-key-myth{display:inline-block;height:14px;border-left:2px dashed currentColor;margin-right:8px;vertical-align:-2px}

/* From / to pairs. */
.post-pairs{display:grid;gap:8px}
.post-pairs p{margin:0}
.post-pairs-head,.post-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.post-pairs-head{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);line-height:1.3}
.post-pair{position:relative;align-items:stretch}
.post-pair span{display:flex;align-items:center;padding:12px 14px;border-radius:12px;font-size:15.5px;line-height:1.4;background:color-mix(in srgb,var(--ink) 6%,transparent)}
.post-pair span:last-child{background:var(--panel);font-weight:600}
.post-pair::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-right:2px solid var(--accent);border-top:2px solid var(--accent);transform:translate(-65%,-50%) rotate(45deg)}

/* Numbered stages. */
.post-stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 8px}
@media (min-width:640px){.post-stages{grid-template-columns:repeat(8,minmax(0,1fr))}}
.post-stages li{margin:0;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;font-size:12.5px;line-height:1.25}
.post-stages b{display:grid;place-items:center;width:34px;height:34px;margin-bottom:6px;border-radius:50%;border:2px solid color-mix(in srgb,var(--accent) 60%,transparent);font-size:14px;color:var(--accent)}
.post-stages li.is-bloom b{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.post-stages span{font-weight:600}
.post-stages small{font-size:12px;opacity:.72}

/* Two side by side cards. */
.post-duo{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){.post-duo{grid-template-columns:repeat(2,minmax(0,1fr))}}
.post-duo > div{border-radius:14px;padding:16px 18px;background:var(--panel)}
.post-duo > div + div{background:transparent;border:1px dashed color-mix(in srgb,var(--accent) 55%,transparent)}
.post-duo-head{font-family:var(--serif);font-size:23px;line-height:1.2;margin:0}
.post-duo-time{font-size:13px;font-weight:600;color:var(--accent);margin:2px 0 8px}
.post-duo ul{margin:0}

/* Linked tiles with a big number. */
.post-groups{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.post-groups{grid-template-columns:repeat(3,minmax(0,1fr))}}
.post-groups li{margin:0}
.post-groups a{display:flex;flex-direction:column;gap:4px;height:100%;padding:14px 16px;border-radius:14px;background:var(--panel);border:1px solid transparent;color:var(--ink);text-decoration:none;font-size:15px;line-height:1.3}
.post-groups a:hover{opacity:1;border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.post-groups b{font-family:var(--serif);font-weight:400;font-size:32px;line-height:1;color:var(--accent)}

/* Related cards that use a featured photo. */
.post-card-img.is-photo{background:var(--card)}
.post-card-img.is-photo img{top:0;height:100%;object-fit:cover}

/* Guides index: cards with images. The title link covers the whole card. */
.guide-card{position:relative;padding:0!important;overflow:hidden}
.guide-card .card-img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--panel)}
.guide-card .card-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.guide-card:hover .card-img img{transform:scale(1.03)}
.guide-card .card-body{flex:1;display:flex;flex-direction:column;padding:18px 22px 20px}
.guide-card h2 a::after{content:"";position:absolute;inset:0;z-index:1}
@media (prefers-reduced-motion:reduce){.guide-card .card-img img,.post-card{transition:none}}

/* Free tool: featured image under the page title. */
.tool-hero{margin:26px 0 0;border-radius:20px;overflow:hidden;aspect-ratio:16/9;background:var(--panel);border:1px solid var(--line-soft)}
.tool-hero img{display:block;width:100%;height:100%;object-fit:cover}

@media print{
  .post-flow li,.post-sort > div,.post-duo > div,.post-groups a{background:none;border:1px solid #bbb}
  .tool-hero{display:none}
}

/* ---------- Softly Noted visuals: mood orbs, pixels, the two minute bar ---------- */
/* A week of entries: one orb per day. */
.sn-week{list-style:none;margin:0;padding:0;display:grid;gap:10px 8px;grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}
.sn-week li{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:12px 6px;border-radius:14px;background:var(--panel)}
.sn-week img{width:46px;height:46px;margin:2px 0 4px}
.sn-week b{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sn-week span{font-weight:600;font-size:15px;line-height:1.2}
.sn-week small{font-size:12.5px;line-height:1.35;color:var(--muted)}
.sn-week small mark{background:none;color:var(--ink);font-weight:700;border-bottom:2px solid var(--accent)}
/* A row of moods with their orbs. */
.sn-moods{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
.sn-moods li{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:600;font-size:15px}
.sn-moods img{width:64px;height:64px}
/* Inner weather words. */
.sn-weather{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}
.sn-weather li{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border-radius:14px;background:var(--panel);font-weight:600;font-size:15px}
.sn-weather svg{width:40px;height:40px;color:var(--accent)}
/* Year in pixels: 12 columns, 31 rows. */
.sn-pixels{display:grid;grid-template-columns:22px repeat(12,minmax(0,1fr));gap:3px;max-width:460px;margin:0 auto;font-size:11px;line-height:1}
.sn-pixels span{aspect-ratio:1;border-radius:3px;background:var(--field);border:1px solid var(--line-soft)}
.sn-pixels .h,.sn-pixels .d{aspect-ratio:auto;background:none;border:0;border-radius:0;color:var(--muted);text-align:center;font-weight:600;align-self:center}
.sn-pixels .d{text-align:right;padding-right:4px;font-weight:400}
.sn-pixels .x{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 12%,transparent) 0 2px,transparent 2px 5px);border-color:transparent}
.sn-key{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:14px}
.sn-key li{margin:0;display:inline-flex;align-items:center;gap:7px}
.sn-key i{width:14px;height:14px;border-radius:3px;display:inline-block}
.sn-key .blank{background:var(--field);border:1px solid var(--line)}
.sn-key .x{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 20%,transparent) 0 2px,transparent 2px 5px)}
/* The two minute check-in as one bar. */
.sn-bar{display:flex;height:40px;border-radius:12px;overflow:hidden;gap:3px}
.sn-bar span{display:grid;place-items:center;color:#f7f2ee;font-weight:700;font-size:14px}
.sn-bar-legend{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px}
.sn-bar-legend li{margin:0;display:flex;align-items:baseline;gap:10px;font-size:15px}
.sn-bar-legend i{flex:none;width:12px;height:12px;border-radius:3px;transform:translateY(1px)}
.sn-bar-legend small{margin-left:auto;color:var(--muted);font-size:13.5px;white-space:nowrap}
.sn-bar-scale{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px}
/* Entry sizes, smallest first. */
.sn-sizes{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sn-sizes li{margin:0;display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;align-items:center}
.sn-sizes b{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.sn-sizes span{padding:10px 14px;border-radius:12px;background:var(--field);border:1px solid var(--line-soft);font-family:var(--serif);font-size:18px;line-height:1.35}
@media (max-width:520px){.sn-sizes li{grid-template-columns:minmax(0,1fr);gap:4px}}
.sn-weather small{font-weight:400;font-size:12.5px;line-height:1.35;color:var(--muted);text-align:center;margin-top:-4px}

/* A figure with no subtitle: space between the title and the visual. */
.post-figure-title + :not(.post-figure-sub){margin-top:16px}

/* ==========================================================================
   Light/dark switch (23 Sep): the same sun/moon button as index.html, placed at
   the end of the header nav. Every colour above comes from the tokens in :root,
   so the whole page, its diagrams and the free tool follow the theme.
   ========================================================================== */
.top nav{align-items:center}
.theme-btn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);background:var(--card);color:var(--ink);cursor:pointer;padding:0;flex:none}
.theme-btn:hover{border-color:var(--accent)}
.theme-btn svg{width:18px;height:18px}
.theme-btn .i-sun{display:none}
[data-theme="dark"] .theme-btn .i-sun{display:block}[data-theme="dark"] .theme-btn .i-moon{display:none}

/* Accent text sitting on a tinted panel uses the deeper accent so it stays above 4.5:1. */
.gd-guide-grid .eyebrow{opacity:1}
.post-flow li small,.post-sort > div:first-child .post-sort-head,.post-duo > div:first-child .post-duo-time,.gd-note a,.post-callout a,.gd-cta a:not(.btn),.post-flow a,.post-sort a,.post-duo a{color:var(--accent-ink)}

/* The footer's app list carries inline colours made for the light page; follow the theme instead. */
footer > nav[aria-label="More apps from JPott Studios"]{color:var(--foot)!important}
footer > nav[aria-label="More apps from JPott Studios"] > a{color:var(--foot-name)!important}
footer > nav[aria-label="More apps from JPott Studios"] > a > span + span{color:var(--foot-sub)!important}

/* The printable sheet is paper: it stays cream and plum on white in both themes. */
.mt-sheet{--bg:#f7f2ee;--ink:#2b2830;--accent:#74659c;--muted:#5d5866;--line:rgba(43,40,48,.14);--line-soft:rgba(43,40,48,.1);color:#2b2830;color-scheme:light}

/* Paper is always light: print with the light palette whatever the screen theme. */
@media print{
  :root,:root[data-theme]{--bg:#fff;--ink:#222;--accent:#74659c;--muted:#555;--panel:#fff;--card:#fff;--field:#fff;--chip-bg:transparent;--band-warm:transparent;color-scheme:light}
  .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}}

/* ---------- 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(43,40,48,.28)}
figure.jp-video figcaption{margin-top:.8rem;font-size:1rem;line-height:1.4;color:var(--muted)}
@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%}}