/* cursors-home.css (the static home and blog subset) — GENERATED by scripts/cursors/build-house-cursors.mjs; do not hand-edit.
   The house cursor suite (lab/cursors/). Each cursor two ways:
     cursor: var(--cur-<id>)   the variable holds the full value, hotspot and native fallback
     class="cur-<id>"           the same as a class
   The variable takes the best form the browser parses (custom properties cannot fall back by
   declaration order, so @supports picks): url(1x) → -webkit-image-set → image-set (the 4x image
   only, so the OS scales it down for any screen density or pointer size, never up).
   The class orders its declarations the same way, so an unsupported form is simply dropped.
   Hotspots are in 32 px space. Under prefers-contrast: more or forced-colors every cursor is the
   native one. */
:root {
  --cur-link: url("/cursors/link-32.png?v=3696d742ed") 14 8, pointer;
}
@supports (cursor: -webkit-image-set(url("/cursors/arrow-128.png") 4x) 1 1, auto) {
  :root {
    --cur-link: -webkit-image-set(url("/cursors/link-128.png?v=3696d742ed") 4x) 14 8, pointer;
  }
}
@supports (cursor: image-set(url("/cursors/arrow-128.png") 4x) 1 1, auto) {
  :root {
    --cur-link: image-set(url("/cursors/link-128.png?v=3696d742ed") 4x) 14 8, pointer;
  }
}
.cur-link { cursor: url("/cursors/link-32.png?v=3696d742ed") 14 8, pointer; cursor: -webkit-image-set(url("/cursors/link-128.png?v=3696d742ed") 4x) 14 8, pointer; cursor: image-set(url("/cursors/link-128.png?v=3696d742ed") 4x) 14 8, pointer; }
:where(a[href]) { cursor: var(--cur-link, pointer); }
@media (prefers-contrast: more), (forced-colors: active) {
  :root {
    --cur-link: pointer;
  }
  .cur-link { cursor: pointer; }
}

/* ── the ceramic platform, lifted from src/home-static/css/platform.css ── */
.bplat { position: relative; z-index: 2; width: min(880px, 94vw);
  --G: clamp(22px, 3.2vh, 30px);
  padding: var(--G) clamp(22px, 4vw, 56px);
  border-radius: 48px; display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(180deg, #FFFEFC 0%, #FAF1E6 50%, #F1E1CC 100%);
  background-clip: padding-box;
  border: 2px solid transparent;
  box-shadow: inset 0 3px 0 rgba(255,255,255,1), inset 0 -6px 14px rgba(150,95,45,.14), inset 0 0 0 1px rgba(150,95,45,.05), 0 0 0 2px rgba(255,255,255,.7), 0 3px 6px rgba(70,35,10,.14), 0 34px 70px rgba(70,35,10,.30), 0 100px 180px rgba(70,35,10,.22);
}
.bplat::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='hpc'><feTurbulence type='turbulence' baseFrequency='0.03' numOctaves='3' seed='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0 0 0.8 1'/></feComponentTransfer></filter><rect width='420' height='420' filter='url(%23hpc)'/></svg>");
  background-size: 420px 420px; mix-blend-mode: multiply; opacity: .10;
}
.bplat::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 2; pointer-events: none;
  background: radial-gradient(60% 70% at 32% 10%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 70%), linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.35) 18%, rgba(255,255,255,0) 42%), linear-gradient(180deg, rgba(255,122,61,0) 66%, rgba(255,122,61,.10) 86%, rgba(255,82,0,.18) 100%);
}

/* blog.css — the blog wears the home's OBJECTS, not just its tokens
   (scripts/build-blog.mjs → public/blog/_blog.css).
   The ceramic platform (.bplat) is the home's .hh-plat, lifted at build so it
   cannot drift; the cards are the bento's .ecard language — glass, a ghost
   numeral in Clash Display, Zodiak for the name; the chips are the home's
   .tbxchip with the same category colours. Paper, ink and accent are :root
   in home.css. */

:root {
  --paper: #FAF7F2;
  --card: #FAF4EE;
  --ink: #241f1b;
  --ink2: #5f574f;
  --ink3: #8F877E;
  --accent: #E8945A;
  --line: rgba(36,31,27,.11);
  --line2: rgba(36,31,27,.055);
  /* the toolbox tokens the lifted .tbxchip rules read */
  --tx: #241f1b; --tx2: #6B6259; --tx3: #8F877E; --tacc: #E8945A;
  --tl: rgba(36,31,27,.11); --tl2: rgba(36,31,27,.055);
  --ec: #E8945A;
  --morph-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Outfit', system-ui, -apple-system, sans-serif; overflow-x: clip; }
body { min-height: 100dvh; font-size: 17px; line-height: 1.72; position: relative; }
/* the home's warm field: a peach wash where the platform sits */
body::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 960px; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 55% at 50% 12%, rgba(240,178,120,.30) 0%, rgba(240,178,120,0) 70%); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

.skip-link { position: absolute; top: auto; inset-inline-start: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); z-index: 99999; padding: 8px 16px; background: #FF5200; color: #1a1206; font-size: 14px; font-weight: 600; border-radius: 4px; }
.skip-link:focus { inset-inline-start: 16px; top: 16px; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; }

/* ── header: the wordmark, the section, two doors ─────────────────────── */
.bhead { display: flex; align-items: center; gap: 16px; max-width: 1180px; margin: 0 auto; padding: 18px 24px 0; position: relative; z-index: 4; }
.bhead-brand { display: block; margin: -6px 0; }
.bhead-brand img { display: block; height: 72px; width: auto; filter: drop-shadow(0 6px 14px rgba(150,80,20,.18)); }
.bhead-kicker { font-family: 'Instrument Sans Variable', 'Instrument Sans', sans-serif; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-left: -2px; }
.bhead-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; font-family: 'Instrument Sans Variable', 'Instrument Sans', sans-serif; font-size: 13.5px; color: var(--ink2); }
.bhead-nav > a { height: 36px; padding: 0 12px; border-radius: 10px; display: inline-flex; align-items: center; transition: background .2s, color .2s; }
.bhead-nav > a:hover { color: var(--ink); background: rgba(255,255,255,.7); }
.bhead-cta, .bhead-nav > a.bhead-cta { height: 38px; padding: 0 18px; border-radius: 19px; font-weight: 600; color: #1a1206;
  background: linear-gradient(180deg, #f3b483, #E8945A); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 3px 10px rgba(232,148,90,.35); }
.bhead-cta:hover, .bhead-nav > a.bhead-cta:hover { color: #1a1206; background: linear-gradient(180deg, #f6bd90, #eb9a62); }

/* ── the platform: the home's ceramic stage, lifted (.hh-plat → .bplat) ── */
.bplat { width: min(1080px, 94vw); margin: 22px auto 0; align-items: flex-start;
  padding: clamp(30px, 4.6vw, 56px) clamp(26px, 5.4vw, 72px) clamp(28px, 4vw, 48px); }
.bplat > * { position: relative; z-index: 3; }
.benum { position: absolute; top: 14px; right: 26px; z-index: 3; pointer-events: none; user-select: none;
  font-family: 'Clash Display', 'Outfit', sans-serif; font-weight: 600; font-size: clamp(88px, 15vw, 210px); line-height: 1; letter-spacing: -.02em; color: #2a2622; opacity: .055; }
.bplat .eyebrow, .bplat .bchip { margin-bottom: 18px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: 'Instrument Sans Variable', 'Instrument Sans', sans-serif; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.bchip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--ec) 35%, transparent); background: rgba(255,255,255,.72);
  font-family: 'Instrument Sans Variable', 'Instrument Sans', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink2); }
.bchip:hover { border-color: var(--ec); color: var(--ink); background: #fff; }
.bdot { width: 7px; height: 7px; flex: none; border-radius: 2px; background: var(--ec); }
.bplat h1 { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: clamp(2.5rem, 6.2vw, 4.4rem); line-height: 0.96; letter-spacing: -0.045em; color: #1c1a18; margin: 0 0 22px; max-width: 14ch; }
/* CJK: a full-width glyph is a word; the Latin measure and tracking do not apply */
html:is([lang="ja"], [lang="ko"], [lang^="zh"]) .bplat h1 { max-width: 24ch; letter-spacing: -0.01em; line-height: 1.12; font-size: clamp(2.2rem, 5.2vw, 3.8rem); }
html:is([lang="ja"], [lang="ko"], [lang^="zh"]) body, html:is([lang="ja"], [lang="ko"], [lang^="zh"]) .ename { line-break: strict; word-break: normal; }
html[dir="rtl"] .bplat { align-items: flex-end; text-align: right; }
html[dir="rtl"] .benum { right: auto; left: 26px; }
html[dir="rtl"] .bhead-nav { margin-left: 0; margin-right: auto; }
h1 .accent, h1 .highlight { background: linear-gradient(135deg, #FF5200, #ff8c00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.bplat .lede { font-family: 'Outfit', sans-serif; font-weight: 300; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--ink2); margin: 0 0 22px; max-width: 640px; }
.byline { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: 'Instrument Sans Variable', 'Instrument Sans', sans-serif; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); margin: 0; }
.byline span + span::before { content: "·"; margin-right: 14px; color: var(--accent); }

/* ── the article column ────────────────────────────────────────────────── */
.wrap { max-width: 720px; margin: 0 auto; padding: 44px 24px 96px; counter-reset: step; }
h2 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2rem); line-height: 1.12; letter-spacing: -0.025em; color: #1c1a18; margin: 52px 0 14px; counter-reset: step; }
h3 { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em; color: #1c1a18; margin: 36px 0 10px; }
p { margin: 0 0 18px; }
.editorial { font-family: 'Zodiak', Georgia, serif; font-style: italic; font-size: 1.12em; color: #c8763a; }
ul, ol { padding-left: 22px; margin: 0 0 20px; }
li { margin: 0 0 8px; }
strong { font-weight: 600; color: #1c1a18; }
.highlight { color: #FF5200; font-weight: 600; }
.dim { color: var(--ink3); }
blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent); font-family: 'Zodiak', Georgia, serif; font-size: 1.25rem; line-height: 1.5; color: var(--ink2); }
code { font-family: 'Azeret Mono', ui-monospace, monospace; font-size: .92em; background: #F1EBE3; padding: 2px 6px; border-radius: 6px; }
pre { font-family: 'Azeret Mono', ui-monospace, monospace; font-size: 14px; line-height: 1.6; background: #F1EBE3; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; overflow-x: auto; margin: 0 0 22px; }
pre code { background: none; padding: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15.5px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: 'Instrument Sans Variable', 'Instrument Sans', sans-serif; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
figure { margin: 28px 0; }
figcaption { font-size: 13.5px; color: var(--ink3); margin-top: 8px; }
.reveal, .reveal-stagger { opacity: 1; transform: none; }

/* ── the ceramic blocks — glass cards, a ghost numeral for the steps ────── */
.step, .warning, .tool-card, .privacy {
  position: relative; overflow: hidden; background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.85); border-radius: 18px; padding: 18px 22px; margin: 0 0 12px;
  box-shadow: 0 1px 1px rgba(255,255,255,.95) inset, 0 14px 36px -18px rgba(150,80,20,.28), 0 0 0 1px var(--line2);
}
.step { counter-increment: step; padding-right: 92px; min-height: 64px; display: flex; align-items: center; }
.step::after { content: counter(step, decimal-leading-zero); position: absolute; top: 4px; right: 16px; font-family: 'Clash Display', 'Outfit', sans-serif; font-weight: 600; font-size: 58px; line-height: 1; letter-spacing: -.02em; color: #2a2622; opacity: .07; pointer-events: none; }
.step > strong:first-child { color: var(--accent); font-family: 'Instrument Sans Variable', 'Instrument Sans', sans-serif; font-size: 12px; letter-spacing: .12em; margin-right: 10px; flex: none; }
.warning { border-color: rgba(255,82,0,.22); background: linear-gradient(180deg, #FDF3EA, #FBE8D8); }
.warning::before { content: "Note"; display: block; font-family: 'Instrument Sans Variable', 'Instrument Sans', sans-serif; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: #FF5200; margin-bottom: 6px; }
.privacy { background: linear-gradient(180deg, #FFFEFC, #FAF1E6); }
.tool-card { display: flex; gap: 14px; align-items: flex-start; }
.tool-card .rank { font-family: 'Clash Display', 'Outfit', sans-serif; font-weight: 600; font-size: 2rem; line-height: 1; color: var(--accent); min-width: 40px; opacity: .9; }
.badge, .post-badge { display: inline-block; font-family: 'Instrument Sans Variable', 'Instrument Sans', sans-serif; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); border: 1px solid rgba(232,148,90,.45); border-radius: 999px; padding: 4px 10px; }

.cta { display: inline-flex; align-items: center; height: 48px; padding: 0 24px; border-radius: 24px; margin: 12px 0 8px; font-weight: 600; font-size: 15px; color: #1a1206;
  background: linear-gradient(180deg, #f3b483, #E8945A); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 24px -6px rgba(232,148,90,.6); transition: transform .28s var(--morph-ease), box-shadow .28s; }
.cta:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 12px 30px -8px rgba(232,148,90,.75); }

/* ── cards: the bento's language ───────────────────────────────────────── */
.posts, .related-grid { display: grid; gap: 14px; }
.posts { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1080px; margin: 18px auto 0; padding: 0 3vw; }
.related-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.post, .related-card { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 236px; padding: 24px; border-radius: 20px; color: var(--ink);
  /* the bento's empty band: the ghost numeral owns the top of the card */
  padding-top: 118px;
  border: 1px solid rgba(255,255,255,.72); background: rgba(255,255,255,.82);
  box-shadow: 0 20px 52px rgba(150,80,20,.12), inset 0 1px 1px rgba(255,255,255,.95);
  transition: border-color .25s, box-shadow .3s, transform .32s var(--morph-ease), opacity .28s ease, filter .28s ease; }
.post::after, .related-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(80% 60% at 100% 100%, color-mix(in srgb, var(--ec) 22%, transparent), transparent 70%); }
.post:hover, .related-card:hover { z-index: 2; transform: translateY(-3px); border-color: var(--ec);
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 0 0 1px var(--ec), 0 40px 82px -22px rgba(120,70,20,.32), 0 0 70px -10px color-mix(in srgb, var(--ec) 55%, transparent); }
.post:hover::after, .related-card:hover::after { opacity: 1; }
.posts:has(.post:hover) .post:not(:hover) { opacity: .66; filter: saturate(.8); }
.post > *, .related-card > * { position: relative; z-index: 1; }
.enum { position: absolute; top: 10px; right: 18px; z-index: 0; font-family: 'Clash Display', 'Outfit', sans-serif; font-weight: 600; font-size: 104px; line-height: 1; letter-spacing: -.02em; color: #2a2622; opacity: .06; pointer-events: none; user-select: none; }
.post:hover .enum { opacity: .085; }
.ekicker { display: flex; align-items: center; gap: 8px; font-family: 'Instrument Sans Variable', 'Instrument Sans', sans-serif; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--ec); }
.ename, .related-card .title { font-family: 'Zodiak', Georgia, serif; font-weight: 400; font-size: 25px; line-height: 1.06; letter-spacing: -.005em; color: #241f1b; margin: 0; text-shadow: 0 1px 0 rgba(255,255,255,.5); transition: letter-spacing .45s ease; }
.related-card { min-height: 190px; padding-top: 84px; }
.related-card .title { font-size: 21px; }
.related-card .enum { font-size: 84px; }
.post:hover .ename, .related-card:hover .title { letter-spacing: .01em; }
.post-desc { font-size: 15px; line-height: 1.5; color: var(--ink2); margin: 0; }
.post-meta { font-family: 'Instrument Sans Variable', 'Instrument Sans', sans-serif; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.post.featured { grid-column: span 2; min-height: 300px; }
.post.featured .ename { font-size: clamp(26px, 2.9vw, 36px); max-width: 22ch; }
.post.featured .post-desc { max-width: 52ch; font-size: 16px; }
.post[hidden] { display: none; }
.related { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.related h3 { margin-top: 0; }
.related-card .badge { align-self: flex-start; }

/* ── the index: chips filter the grid ──────────────────────────────────── */
.bchips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.bchips .tbxchip[hidden] { display: none; }
.bempty { max-width: 1080px; margin: 24px auto 0; padding: 0 3vw; color: var(--ink3); font-family: 'Instrument Sans Variable', 'Instrument Sans', sans-serif; font-size: 13.5px; }
.bindex-foot { max-width: 1080px; margin: 0 auto; padding: 0 3vw 72px; }

/* ── phones ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post.featured { grid-column: span 2; }
}
@media (max-width: 767px) {
  .bhead { padding: 12px 16px 0; gap: 10px; }
  .bhead-brand img { height: 56px; }
  .bhead-kicker { display: none; }
  .bplat { width: calc(100% - 20px); margin-top: 12px; border-radius: 30px; }
  .benum { font-size: 72px; top: 10px; right: 16px; }
  .wrap { padding: 28px 18px 120px; }
  body { font-size: 16.5px; }
  .posts { grid-template-columns: 1fr; padding: 0 10px; }
  .post.featured { grid-column: auto; min-height: 236px; }
  .post { min-height: 200px; padding-top: 92px; }
  .enum { font-size: 72px; }
  .step { padding-right: 72px; }
  .step::after { font-size: 44px; }
  .bfoot { padding-bottom: 96px; }
  /* chips ride one scrolling row on a phone, as the home's toolbox does */
  .bchips { flex-wrap: nowrap; overflow-x: auto; margin: 6px -26px 0; padding: 2px 26px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .bchips::-webkit-scrollbar { display: none; }
  .bchips .tbxchip { flex: none; white-space: nowrap; }
}


/* ── the home's footer + dock + chips, lifted from src/home-static/css/home.css ── */
.tbxchip {display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;cursor:var(--cur-link, pointer);
  appearance:none;border-radius:10px;border:1px solid var(--tl2);background:rgba(255,255,255,.55);
  font-family:'Instrument Sans Variable','Instrument Sans',sans-serif;font-size:13px;font-weight:500;color:var(--tx2);
  position:relative;
  transition:color .2s,background .2s,border-color .2s,box-shadow .2s}
.tbxchip::before {content:'';position:absolute;inset:-5px 0}
.tbxchip:hover {color:var(--tx);background:rgba(255,255,255,.94);border-color:var(--tl)}
.tbxchip:focus-visible {outline:2px solid color-mix(in srgb,var(--tacc) 70%,transparent);outline-offset:2px}
.tbxchip .tbxdot {width:7px;height:7px;flex:none;border-radius:2px;background:var(--tc,var(--tacc))}
.tbxchip .tbxn {font-size:11.5px;font-weight:600;color:var(--tx3);font-variant-numeric:tabular-nums}
.tbxchip.at {color:var(--tx);background:rgba(255,255,255,1);
  border-color:color-mix(in srgb,var(--tc) 46%,transparent);
  box-shadow:0 1px 2px rgba(23,22,26,.05),0 8px 18px -10px rgba(23,22,26,.32)}
.tbxchip.at .tbxn {color:var(--tx2)}
.tbxchip.none {opacity:.4}
.tbxchip.top .tbxdot {display:none}
.tbxchip[hidden] {display:none}
.tbxchip.mo {border-style:dashed;color:var(--tx3)}
.tbxchip.mo .tbxn {color:var(--tx3)}
.tbxchip.mo:hover {color:var(--tx);border-style:solid}
.bfoot { position: relative; z-index: 2; max-width: 1180px; margin: 60px auto 110px; padding: 42px 40px 32px; border-radius: 26px;
  background: rgba(255,255,255,.5); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.7); box-shadow: 0 24px 64px rgba(140,70,12,.13), inset 0 1px 1px rgba(255,255,255,.95); }
.bfoot .footbrand { display: flex; align-items: center; gap: 13px; margin-bottom: 30px; }
.bfoot .footmark { width: 32px; height: 32px; object-fit: contain; }
.bfoot .foottag { font-family: 'Zodiak', serif; font-size: 16px; color: #3a3530; margin: 0; }
.bfoot .footgrid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 26px; }
.bfoot .footcol { display: flex; flex-direction: column; gap: 9px; }
.bfoot .foothead { font-family: 'Instrument Sans Variable', 'Instrument Sans', sans-serif; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #9a8f84; margin: 0 0 4px; font-weight: 600; }
.bfoot .footlink { font-family: 'Instrument Sans Variable', 'Instrument Sans', sans-serif; font-size: 13.5px; color: #6a635c; text-decoration: none; transition: color .25s, transform .25s; width: fit-content; background: none; border: none; padding: 0; cursor: var(--cur-link, pointer); text-align: left; }
.bfoot .footlink:hover { color: #E8945A; transform: translateX(3px); }
.bfoot .footlang { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(0,0,0,.08); font-family: 'Instrument Sans Variable', 'Instrument Sans', sans-serif; font-size: 13px; }
.bfoot .footlang-h { color: #6a635c; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; margin-right: 6px; }
.bfoot .footlang-a { color: #6a635c; text-decoration: none; white-space: nowrap; transition: color .15s; }
.bfoot .footlang-a:hover { color: #E8945A; }
html[lang] .bfoot .footlang-a[hreflang]:not([hreflang="en"]) { font-family: system-ui, -apple-system, 'Segoe UI', 'Noto Sans', sans-serif; }
.bfoot .footbar { margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,.08); font-family: 'Instrument Sans Variable', 'Instrument Sans', sans-serif; font-size: 11px; color: #a89e93; text-align: center; }
.mdock { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: flex-end; gap: 9px; padding: 10px 15px; border-radius: 24px;
  isolation: isolate;
  backdrop-filter: blur(34px) saturate(1.9) brightness(1.06); -webkit-backdrop-filter: blur(34px) saturate(1.9) brightness(1.06);
  background: linear-gradient(180deg, hsl(0 0% 100% / .40), hsl(0 0% 100% / .20));
  border: 1px solid hsl(0 0% 100% / .58);
  box-shadow: inset 0 1.5px 1px hsl(0 0% 100% / .95), inset 0 -10px 22px hsl(28 60% 72% / .14), inset 0 0 0 1px hsl(0 0% 100% / .14),
    0 10px 26px rgba(150,85,25,.13), 0 30px 72px rgba(120,60,15,.22); }
.mdock::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: linear-gradient(105deg, transparent 32%, hsl(0 0% 100% / .34) 47%, transparent 60%);
  background-size: 230% 100%; opacity: .55; animation: mdsheen 7.5s ease-in-out infinite; }
.mdock > * { position: relative; z-index: 1; }
.mdbtn { appearance: none; border: none; background: transparent; cursor: var(--cur-link, pointer); padding: 0;
  width: 44px; height: 44px; border-radius: 13px; position: relative;
  display: grid; place-items: center; transform-origin: bottom center;
  color: #4a443e;
  transition: transform .22s cubic-bezier(.22,1,.36,1), background .25s, color .25s; }
.mdbtn:hover { background: hsl(0 0% 100% / .5); color: #E8945A; }
.mdbtn.active { color: #E8945A; transform: translateY(-3px) scale(1.14); }
.mdock { transition: transform .38s cubic-bezier(.22,.85,.3,1), opacity .3s ease; }
.mdock.mdock-hide { transform: translateX(-50%) translateY(150%); opacity: 0; pointer-events: none; }
.mdbtn.active::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: #FF7A2E; box-shadow: 0 0 9px 1px rgba(255,122,46,.9); animation: mddot 2.6s ease-in-out infinite; }
.mdbtn:hover .mdico { filter: drop-shadow(0 4px 9px rgba(150,80,20,.32)); }
.mdbtn.active .mdico { filter: drop-shadow(0 3px 7px rgba(255,122,46,.42)); }
.mdico { width: 23px; height: 23px; display: grid; place-items: center; pointer-events: none; }
.mdico svg { width: 100%; height: 100%; }
.mdsep { width: 1px; height: 30px; align-self: center; margin: 0 2px; background: rgba(0,0,0,.10); border-radius: 1px; }
.mdtip { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px);
  font-family: 'Instrument Sans Variable', 'Instrument Sans', sans-serif; font-size: 11px; font-weight: 500; white-space: nowrap;
  padding: 5px 9px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  background: rgba(255,255,255,.92); color: #3a3530; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 8px 22px rgba(150,80,20,.16); }
.mdbtn:hover .mdtip { opacity: 1; transform: translateX(-50%) translateY(0); }
.mdock { max-width: calc(100vw - 24px); }
.mdock > .mdbtn, .mdock > .mdsep { flex: 0 0 auto; }
@media(max-width:560px) {
  .tbxchip {min-height:44px;padding:0 8px;font-size:11.5px;gap:4px;justify-content:center;text-align:center;line-height:1.15}
  .tbxchip::before {inset:0}
  .tbxchip .tbxdot {display:none}
  .tbxchip .tbxn {font-size:10.5px}
}
@media(prefers-reduced-motion:reduce) {
  .tcard,.tbxchip,.tbx-search,.tbx-clear {transition:none}
}
@media (prefers-reduced-motion: reduce) {
  .mdbtn.active { transform: none; }
}
@media (min-width: 768px) and (orientation: landscape) {
  .mdock { display: none; }
}
@media (max-width: 767px), (orientation: portrait) {
  .mdock { bottom: 14px; gap: 6px; padding: 8px 11px;
    backdrop-filter: blur(16px) saturate(1.4) brightness(1.06); -webkit-backdrop-filter: blur(16px) saturate(1.4) brightness(1.06); }
  .mdock::before { opacity: .3; animation: none; }
  .mdbtn { width: 40px; height: 40px; }
  .mdbtn::before { content: ''; position: absolute; inset: -2px; border-radius: 15px; }
  .mdico { width: 21px; height: 21px; }
  .mdsep { height: 24px; }
}
@media (max-width: 720px) {
  .bfoot .footgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 440px) {
  .bfoot .footgrid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hh-bar::after, .hh-l, .blob-a, .blob-b, .blob-c, .cuechev,
  .mdock::before, .mdbtn.active::after, .wm-eq i, .wm-rec,
  .hero-core { animation: none !important; }
  .mdock::before { opacity: .3; }
  .mdbtn { transition: background .25s, color .25s; }
}

/* ── after the lifted rules: the footer sits in the blog's own column ── */
.bfoot { max-width: 1080px; margin: 0 auto; padding: 56px 24px 28px; }
.related-card .badge, .posts .post-badge { align-self: flex-start; }