/* Ledgable site styling — palette and type shared with the handbook.
   Scoped under .lg so nothing here can leak into wp-admin or the theme. */

:root{
  --lg-paper:#F7F9F7;
  --lg-surface:#FFFFFF;
  --lg-sunk:#EDF1EE;
  --lg-ink:#12191C;
  --lg-soft:#455049;
  --lg-faint:#6E7A72;
  --lg-rule:#D6DED8;
  --lg-rule-soft:#E6EBE7;
  --lg-green:#2C6B54;
  --lg-green-bright:#3A8A6C;
  --lg-green-wash:#E8F1EC;
  --lg-red:#A8392C;
  --lg-red-wash:#FBEDEB;
  --lg-amber:#8A6316;
  --lg-amber-wash:#FBF3E2;
  --lg-code-bg:#EFF3F0;
  --lg-code-ink:#1D3A31;
}
@media (prefers-color-scheme: dark){
  :root{
    --lg-paper:#0E1412;
    --lg-surface:#141B18;
    --lg-sunk:#101715;
    --lg-ink:#E6EDE8;
    --lg-soft:#AAB8B0;
    --lg-faint:#7C8C84;
    --lg-rule:#293430;
    --lg-rule-soft:#1D2622;
    --lg-green:#6FBF9B;
    --lg-green-bright:#8AD4B2;
    --lg-green-wash:#16261F;
    --lg-red:#E5877A;
    --lg-red-wash:#2A1815;
    --lg-amber:#D9AE5F;
    --lg-amber-wash:#251C0D;
    --lg-code-bg:#111917;
    --lg-code-ink:#A9D6C3;
  }
}

.lg{
  font-family:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  color:var(--lg-ink);
}
.lg *{box-sizing:border-box}
.lg p{margin:0 0 16px}
.lg a{color:var(--lg-green);text-underline-offset:2px}
.lg a:hover{color:var(--lg-green-bright)}
.lg strong{font-weight:600}
.lg ul,.lg ol{margin:0 0 18px;padding-left:22px}
.lg li{margin-bottom:7px}
.lg li::marker{color:var(--lg-faint)}
.lg h1,.lg h2,.lg h3{font-family:"Zilla Slab",Georgia,serif;text-wrap:balance}
.lg code,.lg pre{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace}
.lg code{
  font-size:.86em;background:var(--lg-code-bg);color:var(--lg-code-ink);
  padding:1.5px 5px;border-radius:3px;word-break:break-word;
}
.lg pre{
  background:var(--lg-code-bg);border:1px solid var(--lg-rule-soft);
  border-left:2px solid var(--lg-green);border-radius:3px;
  padding:14px 16px;overflow-x:auto;margin:0 0 18px;
}
.lg pre code{background:none;padding:0;font-size:13.5px;line-height:1.6}
.lg .cmt{color:var(--lg-faint)}

/* ---------- home ---------- */
.lg-hero{border-bottom:2px solid var(--lg-ink);padding:8px 0 30px;margin-bottom:44px}
.lg-eyebrow{
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lg-green);margin:0 0 14px;
}
.lg-hero h1{
  font-weight:700;font-size:clamp(38px,7vw,60px);line-height:1.03;
  letter-spacing:-.015em;margin:0 0 18px;
}
.lg-lede{font-size:21px;line-height:1.5;color:var(--lg-soft);font-weight:300;margin:0 0 24px}
.lg-chips{display:flex;flex-wrap:wrap;gap:8px 10px;font-family:"JetBrains Mono",monospace;font-size:11.5px}
.lg-chip{
  border:1px solid var(--lg-rule);border-radius:2px;padding:3px 9px;
  color:var(--lg-faint);background:var(--lg-surface);
}
.lg-chip strong{color:var(--lg-ink);font-weight:500}

.lg h2.lg-sec{
  font-size:29px;font-weight:600;letter-spacing:-.01em;line-height:1.2;
  margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--lg-rule);
}
.lg section{margin:0 0 52px}
.lg h3{font-size:20px;font-weight:600;margin:28px 0 6px;letter-spacing:-.005em}

.lg-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin:0 0 8px}
.lg-card{
  border:1px solid var(--lg-rule);border-radius:3px;background:var(--lg-surface);
  padding:20px 22px;
}
.lg-card h3{margin-top:0}
.lg-card p:last-child{margin-bottom:0}
.lg-kicker{
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lg-green);display:block;margin-bottom:6px;
}

.lg-note{
  border:1px solid var(--lg-rule);border-left:3px solid var(--lg-green);
  background:var(--lg-surface);border-radius:3px;padding:14px 18px;margin:0 0 20px;font-size:16px;
}
.lg-note.warn{border-left-color:var(--lg-red);background:var(--lg-red-wash)}
.lg-note.caution{border-left-color:var(--lg-amber);background:var(--lg-amber-wash)}
.lg-note p:last-child{margin-bottom:0}
.lg-note .lg-kicker{color:inherit;opacity:.8}

.lg-steps{list-style:none;margin:0 0 8px;padding:0;counter-reset:s}
.lg-steps>li{
  counter-increment:s;position:relative;padding:0 0 24px 46px;margin:0;
  border-left:1px solid var(--lg-rule);
}
.lg-steps>li:last-child{border-left-color:transparent;padding-bottom:0}
.lg-steps>li::before{
  content:counter(s);position:absolute;left:-14px;top:-2px;width:28px;height:28px;
  display:grid;place-items:center;background:var(--lg-green);color:var(--lg-paper);
  font-family:"JetBrains Mono",monospace;font-size:12px;border-radius:50%;
}
@media (prefers-color-scheme: dark){.lg-steps>li::before{color:#0E1412}}
.lg-steps h3{margin-top:0}

.lg-cta{
  display:inline-block;background:var(--lg-green);color:var(--lg-paper);
  text-decoration:none;font-weight:600;padding:11px 22px;border-radius:3px;
  border:1px solid var(--lg-green);
}
.lg-cta:hover{background:var(--lg-green-bright);border-color:var(--lg-green-bright);color:var(--lg-paper)}
.lg-cta.ghost{background:transparent;color:var(--lg-green)}
.lg-cta.ghost:hover{background:var(--lg-green-wash);color:var(--lg-green)}
.lg-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 10px}
@media (prefers-color-scheme: dark){
  .lg-cta{color:#0E1412}
  .lg-cta:hover{color:#0E1412}
  .lg-cta.ghost{color:var(--lg-green)}
}

/* ---------- tables + definition rows ---------- */
.lg-tw{overflow-x:auto;margin:0 0 22px;border:1px solid var(--lg-rule);border-radius:3px}
.lg table{border-collapse:collapse;width:100%;font-size:15px;background:var(--lg-surface)}
.lg th,.lg td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--lg-rule-soft);vertical-align:top}
.lg thead th{
  background:var(--lg-sunk);font-family:"JetBrains Mono",monospace;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--lg-faint);font-weight:400;white-space:nowrap;
}
.lg tbody tr:last-child td{border-bottom:none}
.lg td code{white-space:nowrap}

.lg .defs{display:flex;flex-direction:column;margin:0 0 22px;border-top:1px solid var(--lg-rule-soft)}
.lg .defs>div{
  display:grid;grid-template-columns:minmax(110px,180px) minmax(0,1fr);gap:18px;
  padding:12px 0;border-bottom:1px solid var(--lg-rule-soft);
}
.lg .defs dt{font-family:"JetBrains Mono",monospace;font-size:13px;word-break:break-word}
.lg .defs dd{margin:0;color:var(--lg-soft);font-size:15.5px}

/* ---------- handbook page ---------- */
.lg-rail{
  border:1px solid var(--lg-rule);border-radius:3px;background:var(--lg-surface);
  padding:16px 18px;margin:0 0 40px;
}
.lg-rail h2{
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lg-faint);margin:0 0 12px;font-weight:400;
}
.lg-rail ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0}
.lg-rail a{
  display:block;padding:5px 10px;color:var(--lg-soft);text-decoration:none;font-size:14.5px;
  border-left:2px solid var(--lg-rule-soft);
}
.lg-rail a:hover{color:var(--lg-green);border-left-color:var(--lg-green);background:var(--lg-green-wash)}

.lg h4{
  font-family:"Source Sans 3",sans-serif;font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--lg-faint);margin:24px 0 6px;
}
.lg .lede{font-size:18px;color:var(--lg-soft);font-weight:300;margin-bottom:20px}
.lg .note{
  border:1px solid var(--lg-rule);border-left:3px solid var(--lg-green);background:var(--lg-surface);
  border-radius:3px;padding:14px 18px;margin:0 0 20px;font-size:16px;
}
.lg .note.warn{border-left-color:var(--lg-red);background:var(--lg-red-wash)}
.lg .note.caution{border-left-color:var(--lg-amber);background:var(--lg-amber-wash)}
.lg .note p:last-child{margin-bottom:0}
.lg .note-label{
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lg-green);display:block;margin-bottom:5px;
}
.lg .note.warn .note-label{color:var(--lg-red)}
.lg .note.caution .note-label{color:var(--lg-amber)}
.lg h2.sec{
  font-size:29px;font-weight:600;letter-spacing:-.01em;line-height:1.2;margin:0 0 10px;
  padding-bottom:10px;border-bottom:1px solid var(--lg-rule);
}
.lg .table-wrap{overflow-x:auto;margin:0 0 22px;border:1px solid var(--lg-rule);border-radius:3px}
.lg .steps{list-style:none;margin:0 0 8px;padding:0;counter-reset:step}
.lg .steps>li{
  counter-increment:step;position:relative;padding:0 0 24px 46px;margin:0;
  border-left:1px solid var(--lg-rule);
}
.lg .steps>li:last-child{border-left-color:transparent;padding-bottom:0}
.lg .steps>li::before{
  content:counter(step);position:absolute;left:-14px;top:-2px;width:28px;height:28px;
  display:grid;place-items:center;background:var(--lg-green);color:var(--lg-paper);
  font-family:"JetBrains Mono",monospace;font-size:12px;border-radius:50%;
}
@media (prefers-color-scheme: dark){.lg .steps>li::before{color:#0E1412}}
.lg details{
  border:1px solid var(--lg-rule);border-radius:3px;background:var(--lg-surface);
  margin:0 0 8px;overflow:hidden;
}
.lg summary{
  cursor:pointer;padding:13px 18px;font-weight:600;font-size:16px;list-style:none;
  display:flex;gap:12px;align-items:baseline;
}
.lg summary::-webkit-details-marker{display:none}
.lg summary::before{content:"+";font-family:"JetBrains Mono",monospace;color:var(--lg-green);flex:none}
.lg details[open] summary::before{content:"\2013"}
.lg .details-body{padding:0 18px 16px 42px;font-size:16px;color:var(--lg-soft)}
.lg .details-body p:last-child,.lg .details-body pre:last-child{margin-bottom:0}

.lg-foot{
  border-top:2px solid var(--lg-ink);padding-top:18px;margin-top:8px;
  font-size:14.5px;color:var(--lg-faint);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
}
.lg-foot p{margin:0}

@media (max-width:680px){
  .lg .defs>div{grid-template-columns:1fr;gap:3px}
}
@media (prefers-reduced-motion:reduce){.lg *{animation:none!important;transition:none!important}}

/* ---------- theme fit (Twenty Twenty-Five) ----------
   These two pages supply their own masthead, so the theme's page title would
   be a second, competing heading. Hidden here rather than in the plugin: this
   is a site decision about its own pages, not the plugin touching a theme. */
.page-id-10 .wp-block-post-title,
.page-id-11 .wp-block-post-title{display:none}

/* The theme opens with a generous gap meant for a title we are not showing. */
.page-id-10 .wp-block-post-content,
.page-id-11 .wp-block-post-content{margin-block-start:0}
/* Measured on the page rather than guessed: main carries a 70px margin plus
   48px padding, and the group inside it adds another 70 — spacing sized for a
   title block these pages do not render. */
.page-id-10 main,
.page-id-11 main{margin-block-start:0;padding-block-start:clamp(18px,3vw,34px)}
.page-id-10 main > .wp-block-group,
.page-id-11 main > .wp-block-group{padding-block-start:0}

/* wpautop wraps each line in <p>; keep card and note rhythm tight. */
.lg .lg-card p+p,
.lg .lg-note p+p{margin-top:10px}
.lg-hero{padding-top:0}

/* The remaining gap comes from the theme's global block-gap between the header
   and main, plus the content group's own top padding. Both are theme.json
   values applied broadly; overriding them for these two pages only, which is
   the narrowest place the change can live. */
body.page-id-10 main.wp-block-group,
body.page-id-11 main.wp-block-group{margin-block-start:0 !important}
body.page-id-10 main .wp-block-group.has-global-padding,
body.page-id-11 main .wp-block-group.has-global-padding{padding-block-start:0 !important}

/* ---------- screenshots ---------- */
.lg figure.shot{
  margin:0 0 26px;border:1px solid var(--lg-rule);border-radius:4px;
  background:var(--lg-surface);overflow:hidden;
}
.lg figure.shot img{display:block;width:100%;height:auto;border-bottom:1px solid var(--lg-rule-soft)}
.lg figure.shot figcaption{
  font-size:14.5px;color:var(--lg-soft);padding:11px 15px;background:var(--lg-sunk);
}
.lg .dev{
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lg-green);margin-right:8px;
}
/* a pair of shots side by side, for comparisons */
.lg .shots-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-bottom:24px}
.lg .shots-2 figure.shot{margin:0}
/* the hero shot: bigger, no frame fuss */
.lg figure.hero-shot{margin:0 0 34px;border:1px solid var(--lg-rule);border-radius:4px;overflow:hidden;background:var(--lg-surface)}
.lg figure.hero-shot img{display:block;width:100%;height:auto}

/* pull-quote, for the lines worth slowing down on */
.lg .pull{
  font-family:"Zilla Slab",Georgia,serif;font-size:23px;line-height:1.35;font-weight:500;
  color:var(--lg-ink);border-left:3px solid var(--lg-green);padding:2px 0 2px 20px;
  margin:30px 0;text-wrap:balance;
}
/* the cozy/transgressive pair */
.lg .duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin:0 0 26px}
.lg .duo > div{border:1px solid var(--lg-rule);border-radius:4px;padding:20px 22px;background:var(--lg-surface)}
.lg .duo h3{margin-top:0}
.lg .duo p:last-child{margin-bottom:0}

/* Lazy images with no intrinsic size collapse to zero height while they load,
   which makes a figure look broken mid-scroll. Width/height attributes are on
   the tags; this keeps the ratio honoured once CSS resizes them. */
.lg figure.shot img{height:auto}

/* Portrait device shots are ~900x1216. At full column width that is taller than
   a viewport, so scrolling through one shows nothing but the screenshot's own
   white margins and the page looks broken. Sized like a device instead: the
   figure sits in a narrower centred column, landscape shots keep full width. */
.lg figure.shot{max-width:440px;margin-left:auto;margin-right:auto}
.lg figure.shot.wide,
.lg figure.hero-shot{max-width:none}
.lg .shots-2 figure.shot{max-width:none}
@media (max-width:520px){ .lg figure.shot{max-width:none} }

/* ---------- 09-04: features sooner, the reading loop, the wiki-ish knowledge base ---------- */
/* Every page that brings its own masthead hides the theme's title (was: home + handbook only). */
body:has(.lg > .lg-hero) .wp-block-post-title{display:none}
body:has(.lg > .lg-hero) .wp-block-post-content{margin-block-start:0}
body:has(.lg > .lg-hero) main{margin-block-start:0;padding-block-start:clamp(18px,3vw,34px)}
body:has(.lg > .lg-hero) main > .wp-block-group{padding-block-start:0}
body:has(.lg > .lg-hero) main.wp-block-group{margin-block-start:0 !important}
body:has(.lg > .lg-hero) main .wp-block-group.has-global-padding{padding-block-start:0 !important}

/* feature grid: the rooms, up top, each a picture and two lines */
.lg-feat{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin:0 0 14px}
.lg-feat > div{position:relative;display:flex;flex-direction:column;border:1px solid var(--lg-rule);border-radius:4px;background:var(--lg-surface);overflow:hidden;transition:border-color .15s}
.lg-feat > div:hover{border-color:var(--lg-green)}
.lg-feat h3 a{text-decoration:none;color:var(--lg-ink)}
.lg-feat h3 a::after{content:"";position:absolute;inset:0}
.lg-feat .th{aspect-ratio:4/3;overflow:hidden;background:var(--lg-sunk);border-bottom:1px solid var(--lg-rule-soft)}
.lg-feat .th img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.lg-feat .tx{padding:12px 14px 14px}
.lg-feat h3{margin:0 0 4px;font-size:17px}
.lg-feat p{margin:0;font-size:14.5px;color:var(--lg-soft);line-height:1.45}
.lg-feat .lg-kicker{margin-bottom:4px}

/* the walk: Today → All Stars → All Picks → the note */
.lg-walk{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:18px 0 22px;counter-reset:w}
.lg-walk > div{position:relative;border:1px solid var(--lg-rule);border-radius:4px;background:var(--lg-surface);overflow:hidden;counter-increment:w}
.lg-walk > div::before{content:counter(w);position:absolute;top:10px;left:10px;z-index:1;width:26px;height:26px;display:grid;place-items:center;background:var(--lg-green);color:var(--lg-paper);font-family:"JetBrains Mono",monospace;font-size:12px;border-radius:50%}
.lg-walk .th{aspect-ratio:3/4;overflow:hidden;background:var(--lg-sunk);border-bottom:1px solid var(--lg-rule-soft)}
.lg-walk .th img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.lg-walk h3{margin:0;padding:10px 12px 2px;font-size:16px}
.lg-walk p{margin:0;padding:0 12px 12px;font-size:14px;color:var(--lg-soft);line-height:1.45}
@media (prefers-color-scheme: dark){.lg-walk > div::before{color:#0E1412}}

/* three shots in a row */
.lg .shots-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:24px}
.lg .shots-3 figure.shot{margin:0;max-width:none}

/* ---------- knowledge base: breadcrumb, infobox, contents, section nav ---------- */
.kb-crumb{font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.06em;color:var(--lg-faint);margin:0 0 10px}
.kb-crumb a{color:var(--lg-green);text-decoration:none}
.kb-crumb a:hover{text-decoration:underline}
.kb-box{border:1px solid var(--lg-rule);border-radius:4px;background:var(--lg-sunk);padding:14px 16px;margin:0 0 22px;font-size:14.5px}
.kb-box h2{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lg-faint);margin:0 0 8px;font-weight:400;padding:0;border:0}
.kb-box dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px}
.kb-box dt{color:var(--lg-faint);font-family:"JetBrains Mono",monospace;font-size:12px;padding-top:2px}
.kb-box dd{margin:0;color:var(--lg-ink)}
.kb-box figure{margin:0 0 12px;border-radius:3px;overflow:hidden;border:1px solid var(--lg-rule);background:var(--lg-surface)}
.kb-box figure img{display:block;width:100%;height:auto}
.kb-box figcaption{font-size:12.5px;color:var(--lg-soft);padding:6px 8px}
@media (min-width:760px){.kb-box{float:right;width:min(300px,42%);margin:0 0 16px 26px}}
.kb-toc{border-left:2px solid var(--lg-green);padding:4px 0 4px 16px;margin:0 0 24px;font-size:15px}
.kb-toc h2{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lg-faint);margin:0 0 6px;font-weight:400;padding:0;border:0}
.kb-toc ol{margin:0;padding-left:18px}
.kb-toc li{margin-bottom:3px}
.kb-toc a{text-decoration:none}
.kb-toc a:hover{text-decoration:underline}
.lg .kb-body h2{font-size:23px;font-weight:600;margin:30px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--lg-rule-soft)}
.lg .kb-body > p:first-child{font-size:18px;line-height:1.55}
.kb-foot{clear:both;margin-top:36px;border-top:1px solid var(--lg-rule);padding-top:18px}
.kb-foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.kb-foot h2{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lg-faint);margin:0 0 8px;font-weight:400;padding:0;border:0}
.kb-foot ul{list-style:none;margin:0;padding:0}
.kb-foot li{margin:0 0 5px;font-size:15px}
.kb-foot li.here{color:var(--lg-faint)}
.kb-foot li.here::before{content:"\25B8  ";color:var(--lg-green)}
.kb-pn{display:flex;justify-content:space-between;gap:16px;margin:22px 0 0;font-size:14.5px}
.kb-pn a{text-decoration:none;border:1px solid var(--lg-rule);border-radius:3px;padding:8px 12px;background:var(--lg-surface);max-width:48%}
.kb-pn a:hover{border-color:var(--lg-green)}
.kb-pn a.next{margin-left:auto;text-align:right}
.kb-pn span{display:block;font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--lg-faint)}

/* the index: start cards, then one card per section with a picture */
.kb-start{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:0 0 30px}
.kb-start > div{position:relative;border:1px solid var(--lg-rule);border-radius:4px;background:var(--lg-surface);overflow:hidden}
.kb-start > div:hover{border-color:var(--lg-green)}
.kb-start h3 a{text-decoration:none;color:var(--lg-ink)}
.kb-start h3 a::after{content:"";position:absolute;inset:0}
.kb-start .th{aspect-ratio:16/10;overflow:hidden;background:var(--lg-sunk);border-bottom:1px solid var(--lg-rule-soft)}
.kb-start .th img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.kb-start h3{margin:0;padding:12px 14px 2px;font-size:17px}
.kb-start p{margin:0;padding:0 14px 14px;font-size:14.5px;color:var(--lg-soft)}
.kb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;margin:0 0 40px}
.kb-sec{border:1px solid var(--lg-rule);border-radius:4px;background:var(--lg-surface);overflow:hidden;display:flex;flex-direction:column}
.kb-sec .th{aspect-ratio:16/7;overflow:hidden;background:var(--lg-sunk);border-bottom:1px solid var(--lg-rule-soft)}
.kb-sec .th img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.lg .kb-sec h2{font-size:18px;font-weight:600;margin:0;padding:12px 16px 6px;border:0}
.kb-sec h2 .ic{margin-right:8px}
.kb-sec ul{list-style:none;margin:0;padding:0 16px 14px}
.kb-sec li{margin:0 0 7px;font-size:15px;line-height:1.4}
.kb-sec li a{text-decoration:none}
.kb-sec li a:hover{text-decoration:underline}
.kb-sec li small{display:block;color:var(--lg-faint);font-size:13px}
.kb-search .wp-block-search__inside-wrapper{max-width:640px}
/* In an article the picture rows run full width under the infobox, not squeezed beside it. */
.kb-body .shots-2,.kb-body .shots-3{clear:both;padding-top:4px}
/* embedded videos (YouTube, no-cookie) and their caption */
.lg .lg-video{position:relative;aspect-ratio:16/9;margin:8px 0 6px;border:1px solid var(--lg-rule);border-radius:4px;overflow:hidden;background:var(--lg-sunk)}
.lg .lg-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lg .lg-vidcap{font-size:13.5px;color:var(--lg-faint);margin:0 0 22px;font-family:"JetBrains Mono",monospace}
.lg .kb-body .lg-video{clear:both}
/* Buttons: the .lg a link colour was outranking .lg-cta, leaving green text on a green button. */
.lg a.lg-cta,.lg a.lg-cta:visited{color:var(--lg-paper)}
.lg a.lg-cta:hover{color:var(--lg-paper);background:var(--lg-green-bright);border-color:var(--lg-green-bright)}
.lg a.lg-cta.ghost,.lg a.lg-cta.ghost:visited{color:var(--lg-green);background:transparent}
.lg a.lg-cta.ghost:hover{color:var(--lg-green);background:var(--lg-green-wash);border-color:var(--lg-green)}
@media (prefers-color-scheme: dark){
  .lg a.lg-cta,.lg a.lg-cta:visited,.lg a.lg-cta:hover{color:#0E1412}
  .lg a.lg-cta.ghost,.lg a.lg-cta.ghost:visited,.lg a.lg-cta.ghost:hover{color:var(--lg-green)}
}
.lg .wp-block-search__button{background:var(--lg-green);color:var(--lg-paper);border-color:var(--lg-green)}
/* hero chips are links to the install page for that platform */
.lg a.lg-chip{text-decoration:none;color:var(--lg-faint);transition:border-color .15s,color .15s}
.lg a.lg-chip:hover{border-color:var(--lg-green);color:var(--lg-green)}
.lg a.lg-chip:hover strong{color:var(--lg-green)}
/* the maker's note under the hero lede */
.lg .lg-maker{font-family:"Zilla Slab",Georgia,serif;font-size:19px;line-height:1.45;color:var(--lg-ink);border-left:3px solid var(--lg-green);padding:2px 0 2px 18px;margin:0 0 24px;max-width:60ch}
.lg .lg-maker span{display:block;font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--lg-faint);margin-top:8px}
/* the spirit triptych: trash → ledger → garden, in colored pencil */
.lg .lg-trip{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:6px 0 10px}
.lg .lg-trip figure{margin:0;border:1px solid var(--lg-rule);border-radius:6px;overflow:hidden;background:var(--lg-surface)}
.lg .lg-trip img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.lg .lg-trip figcaption{font-family:"Zilla Slab",Georgia,serif;font-size:16.5px;line-height:1.45;padding:14px 16px 16px;color:var(--lg-ink)}
.lg .lg-trip figcaption strong{display:block;font-size:13px;font-family:"JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--lg-green);font-weight:500;margin-bottom:6px}
@media (min-width:600px){.lg .lg-trip{grid-template-columns:repeat(3,1fr);gap:14px}.lg .lg-trip figcaption{font-size:15px;padding:12px 13px 14px}}
/* /pair/: connect the app */
.lg .lg-pair-form{border:1px solid var(--lg-rule);border-radius:4px;background:var(--lg-surface);padding:18px 20px;margin:0 0 24px}
.lg .lg-pair-form label{display:block;font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lg-faint);margin-bottom:8px}
.lg .lg-pair-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.lg .lg-pair-row input{flex:1 1 220px;font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--lg-rule);border-radius:3px;background:var(--lg-paper);color:var(--lg-ink)}
.lg .lg-pair-form button.lg-cta{font:inherit;font-weight:600;cursor:pointer}
.lg .lg-pair-help{font-size:14.5px;color:var(--lg-soft);margin:12px 0 0}
.lg .lg-pair-cred dl{margin:8px 0 0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;align-items:baseline}
.lg .lg-pair-cred dt{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--lg-faint)}
.lg .lg-pair-cred dd{margin:0}
.lg .lg-pair-cred code{font-size:15px;padding:4px 8px;user-select:all}
.lg .lg-pair-list{list-style:none;margin:0 0 24px;padding:0}
.lg .lg-pair-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--lg-rule-soft);font-size:15.5px}
.lg .lg-pair-list small{color:var(--lg-faint)}
.lg .lg-pair-list form{margin:0}
.lg button.lg-cta.small{padding:6px 12px;font-size:13.5px;font:inherit;cursor:pointer}
/* the big points: five bullets that carry the pitch */
.lg .lg-bullets{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:12px}
.lg .lg-bullets li{position:relative;padding:14px 18px 14px 44px;border:1px solid var(--lg-rule);border-radius:4px;background:var(--lg-surface);font-size:17.5px;line-height:1.5;margin:0}
.lg .lg-bullets li::before{content:"\25A0";position:absolute;left:18px;top:15px;color:var(--lg-green);font-size:14px}
.lg .lg-bullets strong{font-weight:700;color:var(--lg-ink)}
.lg .lg-ctas-top{margin:0 0 22px}
.lg .lg-ctas-top .lg-cta{font-size:17px;padding:12px 22px}
.lg .lg-pair-string{white-space:pre-wrap;word-break:break-all;font-size:12.5px;user-select:all}
/* like a Kindle: the readability strip under the hero */
.lg .lg-kindle{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(200px,.9fr);gap:22px;align-items:start;border:1px solid var(--lg-rule);border-radius:6px;background:var(--lg-surface);padding:22px 24px;margin:0 0 44px}
.lg .lg-kindle h2{font-size:26px;font-weight:700;letter-spacing:-.01em;line-height:1.15;margin:0 0 12px}
.lg .lg-kindle p{font-size:16.5px}
.lg .lg-kindle .lg-eyebrow{margin-bottom:8px}
.lg .lg-kindle figure.shot{margin:0;max-width:none}
@media (max-width:640px){.lg .lg-kindle{grid-template-columns:1fr}}
/* what travels with you: one tile per thing that syncs */
.lg .lg-syncgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:8px 0 14px}
.lg .lg-syncgrid>div{border:1px solid var(--lg-rule);border-radius:4px;background:var(--lg-surface);padding:14px 15px 12px}
.lg .lg-syncgrid .ic{display:block;font-size:20px;line-height:1;color:var(--lg-green);margin-bottom:8px}
.lg .lg-syncgrid h4{margin:0 0 6px;font-family:"Zilla Slab",Georgia,serif;font-size:16.5px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--lg-ink)}
.lg .lg-syncgrid p{margin:0 0 8px;font-size:14px;line-height:1.45;color:var(--lg-soft)}
.lg .lg-syncgrid small{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--lg-faint)}