/* Our Little Thing: guides + the free question of the day.
   One standalone stylesheet in the new site design (matches index.html and privacy.html:
   Gloock headings, Figtree text, blush paper, plum ink). No shared/app.css.
   Font urls are relative to this file. */

@font-face{font-family:'Figtree';font-style:italic;font-weight:400 600;font-display:swap;src:url(../assets/fonts/Figtree-italic-400_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:'Figtree';font-style:normal;font-weight:400 800;font-display:swap;src:url(../assets/fonts/Figtree-normal-400_800.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:'Gloock';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/Gloock-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}

:root{
  color-scheme:light;
  --paper:#fbf1ef;
  --ink:#3b0f1f;
  --muted:#6e4450;
  --accent:#7d2f5c;
  --button:#963e6e;
  --on-button:#fff;
  --surface:#fff;
  --pale:#f2d6de;
  --tz-free:#f2c9d6;
  --shadow:rgba(59,15,31,.35);
  --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) 55%,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:'Figtree',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:'Gloock',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:'Gloock',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 ---- */
.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 16px}
.meta{font-size:15px;color:var(--muted)}
.g-head{margin:0 0 8px}
.g-crumbs{font-size:14px;margin:0 0 18px;opacity:.8}
.g-crumbs a{color:inherit}
.g-byline{font-size:14px;opacity:.7;margin:0}

/* ---- article body ---- */
.g-article{margin:0}
.g-article li strong{font-weight:700}

/* in-page jump links: same pill shape as the header nav */
.g-toc{margin:28px 0 8px}
.g-toc p{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.g-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.g-toc li{margin:0}
.g-toc a{display:inline-block;padding:7px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);color:var(--ink);text-decoration:none;font-size:14px}
.g-toc a:hover{background:var(--soft);opacity:1}

/* numbered question lists (native numbering, so it survives copy and paste) */
.g-qlist{margin:16px 0 0;padding:0 0 0 2.4em}
.g-qlist li{padding:10px 4px 10px 6px;margin:0;border-bottom:1px solid var(--line)}
.g-qlist li:last-child{border-bottom:0}
.g-qlist li::marker{color:var(--accent);font-family:'Gloock',serif;font-variant-numeric:tabular-nums}

/* idea lists: bold name, then a line */
.g-ideas{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.g-ideas li{margin:0;padding:18px 22px;background:var(--card);border:1px solid var(--line);border-radius:16px}
.g-ideas li strong{display:block;font-family:'Gloock',serif;font-weight:400;font-size:20px;line-height:1.25;margin-bottom:4px}

/* soft aside, same tint as the privacy page callouts */
.g-note{background:var(--soft);border-radius:16px;padding:18px 22px;margin:24px 0}
.g-note p{margin:0}.g-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(--button);background:var(--button);color:var(--on-button);font:600 16px/1.2 'Figtree',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) 30%,transparent)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn[hidden]{display:none}

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

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

/* ---- guides index cards ---- */
.g-cards{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:640px){.g-cards{grid-template-columns:1fr 1fr}}
.g-card{margin:0;background:var(--card);border:1px solid var(--line);border-radius:20px;transition:transform .18s ease,border-color .18s ease}
.g-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.g-card a{display:block;height:100%;padding:22px 24px 24px;color:inherit;text-decoration:none}
.g-card a:hover{opacity:1}
.g-card .g-tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);background:var(--soft);border-radius:999px;padding:4px 10px;margin-bottom:10px}
.g-card h2{font-size:24px;margin:0 0 6px;padding:0;border:0}
.g-card p{margin:0;opacity:.85}
.g-card .g-go{display:inline-block;margin-top:12px;font-weight:600;color:var(--accent)}

/* ---- question of the day ---- */
.qotd{margin:8px 0 0}
.qotd-lanes{border:0;margin:0 0 18px;padding:0;display:flex;justify-content:center;min-width:0}
.qotd-lanes legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.qotd-seg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);background:var(--card)}
.qotd-seg label{position:relative}
.qotd-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.qotd-seg span{display:inline-block;padding:8px 20px;border-radius:999px;font-weight:600;font-size:15px;color:var(--ink);cursor:pointer;transition:background .15s ease,color .15s ease}
.qotd-seg input:checked + span{background:var(--ink);color:var(--paper)}
.qotd-seg input:focus-visible + span{outline:2px solid var(--ink);outline-offset:3px}
.qotd-card{text-align:center;padding:clamp(28px,6vw,48px) clamp(20px,5vw,40px);border-radius:24px;background:var(--soft);border:1px solid color-mix(in srgb,var(--accent) 18%,transparent)}
.qotd-date{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.qotd-q{font-family:'Gloock',serif;font-weight:400;font-size:clamp(26px,4.4vw,36px);line-height:1.25;letter-spacing:-.01em;margin:0 0 24px;min-height:2.5em;display:flex;align-items:center;justify-content:center;overflow-wrap:break-word}
.qotd-q:focus{outline:none}
.qotd-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.qotd-count{font-size:14px;opacity:.75;margin:14px 0 0;min-height:1.4em}
.qotd-tips{margin-top:8px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.g-card,.g-card:hover,.qotd-seg span{transition:none;transform:none}}

/* ---- print: just the words ---- */
@media print{
  .top,footer,.skip-link,.g-toc,.g-cta,.g-more,.qotd-lanes,.qotd-actions,.qotd-count{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}
  .g-ideas li,.g-note,.qotd-card,.g-card{background:#fff;border:1px solid #bbb;break-inside:avoid}
  .g-qlist li{break-inside:avoid}
}

/* ==========================================================================
   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; .post-cards and .g-card-img are 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(--button) 16%,transparent),transparent 70%),
             linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,var(--paper)),var(--paper))}
.post-band-inner{max-width:1120px;margin:0 auto}
.post-band-text{max-width:820px}
.post-crumbs{font-size:14px;margin:0 0 22px;opacity:.8}
.post-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 8px}
.post-crumbs li{margin:0}
.post-crumbs li + li::before{content:"/";margin-right:8px;opacity:.6}
.post-crumbs a{color:inherit}
.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) 55%,transparent);border:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.post-chips li:first-child{color:var(--on-button);background:var(--button);border-color:var(--button);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-content > h2:first-of-type{margin-top:40px}
.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(--button)}
.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(--button);color:var(--button);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:'Gloock',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(--button);background:var(--soft)}
.post-callout p{margin:0}
.post-callout .post-callout-lead{font-family:'Gloock',serif;font-size:clamp(23px,2.6vw,28px);line-height:1.2;margin-bottom:6px}

/* Tiles: sections of a list at a glance */
.olt-tiles{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.olt-tiles li{margin:0;padding:14px 16px 16px;border-radius:14px;background:var(--paper);border:1px solid var(--line);position:relative;overflow:hidden}
.olt-tiles li::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:color-mix(in srgb,var(--button) calc(var(--t,1) * 100%),var(--pale))}
.olt-tiles b{display:block;font-family:'Gloock',serif;font-weight:400;font-size:21px;line-height:1.15;margin:2px 0 2px}
.olt-tiles .n{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.olt-tiles span:last-child{display:block;font-size:14px;line-height:1.45;opacity:.82;margin-top:6px}
.olt-scale{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:12px 0 0}
.olt-scale i{flex:1;align-self:center;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--pale),var(--button))}

/* Steps: a short flow, numbered */
.olt-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));counter-reset:s}
.olt-steps li{margin:0;padding:16px 16px 18px;border-radius:14px;background:var(--paper);border:1px solid var(--line);counter-increment:s;position:relative}
.olt-steps li::before{content:counter(s);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--button);color:var(--on-button);font:600 14px/1 'Figtree',system-ui,sans-serif;margin-bottom:10px}
.olt-steps b{display:block;font-size:16px;line-height:1.3;margin-bottom:4px}
.olt-steps small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.olt-steps span{display:block;font-size:14px;line-height:1.5;opacity:.82}
.olt-steps li.reveal{background:var(--soft);border-color:color-mix(in srgb,var(--button) 35%,transparent)}

/* Two answers, revealed together */
.olt-reveal{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-top:14px}
.olt-reveal p{margin:0;padding:12px 14px;border-radius:14px 14px 14px 4px;background:var(--surface);border:1px solid var(--line);font-size:14.5px;line-height:1.45}
.olt-reveal p:last-child{border-radius:14px 14px 4px 14px;background:color-mix(in srgb,var(--button) 12%,var(--surface))}
.olt-reveal small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}

/* Comparison table with check marks */
.post-table-wrap{margin:28px 0}
.post-table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;line-height:1.45;border:1px solid var(--line);border-radius:16px;background:var(--card);table-layout:fixed}
.post-table th,.post-table td{padding:12px 12px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.post-table thead th{font-family:'Gloock',serif;font-weight:400;font-size:19px;line-height:1.15;background:var(--soft)}
.post-table thead tr > :first-child{border-top-left-radius:15px}.post-table thead tr > :last-child{border-top-right-radius:15px}
.post-table tbody tr:last-child > *{border-bottom:0}
.post-table tbody th{font-weight:600;font-size:14.5px}
.post-table .yes{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--button) 16%,transparent);color:var(--button)}
.post-table .yes svg{width:14px;height:14px}
.post-table .plus{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:999px;padding:3px 9px}
.post-table caption{caption-side:bottom;text-align:left;font-size:14px;opacity:.8;padding-top:12px}
@media (max-width:520px){.post-table{font-size:13.5px}.post-table th,.post-table td{padding:10px 7px}.post-table thead th{font-size:16px}}

/* Time zone overlap (long distance) */
.olt-tz{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px 12px;align-items:center}
.olt-tz .who{font-size:13.5px;font-weight:700;line-height:1.25}
.olt-tz .who small{display:block;font-weight:400;opacity:.7;font-size:12px}
.olt-tz .bar{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));height:30px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.olt-tz .bar i{display:block}
.olt-tz i.s{background:color-mix(in srgb,var(--ink) 16%,var(--paper))}
.olt-tz i.w{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--surface)) 0 5px,var(--surface) 5px 10px)}
.olt-tz i.f{background:var(--tz-free)}
.olt-tz i.o{background:var(--button)}
.olt-tz .axis{grid-column:2;display:flex;justify-content:space-between;font-size:11.5px;opacity:.65;margin-top:-4px}
.olt-key{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;margin:16px 0 0;padding:0;list-style:none}
.olt-key li{margin:0;display:inline-flex;align-items:center;gap:6px}
.olt-key i{width:14px;height:14px;border-radius:4px;border:1px solid var(--line);display:inline-block}
@media (max-width:520px){.olt-tz{grid-template-columns:1fr}.olt-tz .axis{grid-column:1}}

/* Open-when letters */
.olt-letters{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.olt-letters li{margin:0;position:relative;aspect-ratio:16/10;border-radius:10px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:flex-end;padding:14px 14px 12px;overflow:hidden;box-shadow:0 6px 16px -10px var(--shadow)}
.olt-letters li::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:58%;background:linear-gradient(to bottom right,transparent 49.5%,var(--line) 50%,transparent 50.5%) left/50% 100% no-repeat,linear-gradient(to bottom left,transparent 49.5%,var(--line) 50%,transparent 50.5%) right/50% 100% no-repeat,color-mix(in srgb,var(--button) 8%,var(--surface));clip-path:polygon(0 0,100% 0,50% 100%)}
.olt-letters li::after{content:"";position:absolute;left:50%;top:48%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--button)}
.olt-letters span{position:relative;font-family:'Gloock',serif;font-size:17px;line-height:1.2}

/* A split card: this or that */
.olt-split{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:0}
.olt-split p{margin:0;padding:22px 18px;border-radius:16px;background:var(--surface);border:1px solid var(--line);font-family:'Gloock',serif;font-size:clamp(18px,2.2vw,22px);line-height:1.25;display:flex;align-items:center;justify-content:center;text-align:center}
.olt-split p:last-child{background:color-mix(in srgb,var(--button) 12%,var(--surface))}
.olt-split span{align-self:center;margin:0 -12px;z-index:1;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:13px;font-weight:700;letter-spacing:.06em}
@media (max-width:520px){.olt-split{grid-template-columns:1fr}.olt-split span{margin:-12px auto;justify-self:center}}

/* Related cards with images (articles and the guides index) */
.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:'Gloock',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 */
.g-card.has-img a{padding:0;display:flex;flex-direction:column}
.g-card-img{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:19px 19px 0 0;background:var(--soft)}
.g-card-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.g-card.has-img:hover .g-card-img img{transform:scale(1.04)}
.g-card-text{display:block;padding:18px 22px 22px}
.g-cards-one{margin-top:14px;grid-template-columns:1fr !important}
@media (min-width:640px){
  .g-card.has-img.g-card-wide a{flex-direction:row;align-items:stretch}
  .g-card-wide .g-card-img{flex:0 0 46%;aspect-ratio:16/9;border-radius:19px 0 0 19px}
  .g-card-wide .g-card-text{align-self:center;padding:22px 26px}
}

/* 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,.g-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,.post-table{background:#fff;border:1px solid #bbb;break-inside:avoid}
}
.qotd .tool-hero{margin:28px 0 0}
/* five tiles fit on one row in the 760px column */
.olt-tiles.five{grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr))}
.olt-tiles.five b{font-size:19px}
/* four or more steps read better as a vertical list */
.olt-steps.rows{grid-template-columns:1fr;gap:8px}
.olt-steps.rows li{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:14px;align-items:start;padding:12px 16px}
.olt-steps.rows li::before{grid-row:1 / span 3;margin:0}
.olt-steps.rows li > *{grid-column:2}
.olt-steps.rows b{margin:4px 0 2px}
.olt-tiles.six{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:560px){.olt-tiles.six{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:340px){.olt-tiles.six{grid-template-columns:1fr}}
@media (max-width:520px){.olt-letters{grid-template-columns:repeat(2,minmax(0,1fr))}.olt-letters span{font-size:15px}}

/* ==========================================================================
   Light / dark theme (23 Sep): the same sun/moon toggle, storage key
   ("olt-theme") and dark palette as index.html, so a visitor's choice carries
   between the landing page and the guides. Rose (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;width:44px;height:44px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.theme-btn:hover{border-color:var(--accent);color:var(--accent)}
.theme-btn svg{width:20px;height:20px}
.theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .moon{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,.g-card-img img,.tool-hero img{filter:var(--img-filter)}
@media screen{
  :root[data-theme="dark"]{
    color-scheme:dark;
    --paper:#1b0a12;
    --ink:#fbeef2;
    --muted:#dcbcc8;
    --accent:#f3b5d1;
    --button:#f0a6c8;
    --on-button:#2a0a18;
    --surface:#351a29;
    --card:#2b1320;
    --soft:#3a1a2b;
    --pale:#4a2336;
    --tz-free:#7a3558;
    --shadow:rgba(0,0,0,.6);
    --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}}
/* time zone key swatches (were inline styles; now follow the theme) */
.olt-key i.f{background:var(--tz-free)}
.olt-key i.w{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--surface)) 0 4px,var(--surface) 4px 8px)}
.olt-key i.s{background:color-mix(in srgb,var(--ink) 16%,var(--paper))}
.olt-key i.o{background:var(--button)}

.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}}
.g-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(59,15,31,.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%}}