/* The blog: index, topic pages and posts. Layered on legal.css, whose paper
   palette, top bar, footer, contents rail and section rhythm it shares with
   FAQ, Privacy and Terms. Mobile first.

   From the design handoff (design_handoff_blog/blog.css), with two local
   changes that a re-sync must keep: a plain rgba() before every color-mix()
   (floor: iOS 16.0 / Chromium 105, as in site-v8.css), and the "Opinly body"
   block at the end, which styles what the CMS can put in a post that the
   hand-written reference post never had. */

/* breadcrumb */
.crumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase}
.crumb a{color:var(--muted);text-decoration:none;padding:12px 0;margin:-12px 0}
.crumb a:hover{color:var(--clay-deep)}
.crumb a:last-child{color:var(--clay-deep)}
.crumb i{font-style:normal;color:var(--line-2)}

/* ─── index: sticky filter bar ─── */
.body.idx .wrap{display:block}
.l-bar{position:sticky;top:0;z-index:6;background:rgba(244,238,227,.94);background:color-mix(in oklab,var(--paper) 94%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin:0 calc(-1 * clamp(20px,5vw,44px));padding:10px clamp(20px,5vw,44px) 8px;border-bottom:1px solid transparent;transition:border-color .2s}
.l-bar.stuck{border-bottom-color:var(--line)}
@media(min-width:940px){.l-bar{top:62px}}
.l-filters{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;margin:0 calc(-1 * clamp(20px,5vw,44px));padding:2px clamp(20px,5vw,44px)}
.l-filters::-webkit-scrollbar{display:none}
@media(min-width:760px){.l-filters{flex-wrap:wrap;overflow:visible;margin:0;padding:2px 0}}
.l-chip{flex:none;text-decoration:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);background:var(--surface);border:1px solid var(--line-2);border-radius:999px;padding:0 16px;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
@media(min-width:760px){.l-chip{min-height:38px;padding:0 14px}}
.l-chip s{text-decoration:none;font-size:10px;letter-spacing:.04em;color:var(--faint)}
.l-chip:hover{color:var(--ink);border-color:var(--clay-soft)}
.l-chip.on{color:#F8F2E9;background:var(--clay-deep);border-color:var(--clay-deep)}
.l-chip.on s{color:#F1DCCD}
.l-chip:focus-visible,.rb-sec:focus-visible,.rb-back:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.l-count{margin-top:8px;font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.l-count b{color:var(--clay-deep);font-weight:800}

/* list */
.l-list{list-style:none;display:flex;flex-direction:column;margin-top:14px;border-top:1px solid var(--line)}
.l-row{border-bottom:1px solid var(--line);color:var(--ink)}
.l-row[hidden]{display:none}
.l-row>a{color:var(--ink);text-decoration:none}
.l-row>a,.l-row:not(.live){display:grid;grid-template-columns:1fr;gap:6px;padding:18px 2px}
@media(min-width:760px){.l-row>a,.l-row:not(.live){grid-template-columns:132px 1fr 92px;gap:24px;align-items:baseline;padding:20px 4px}}
.l-row.live>a:hover{background:rgba(251,247,239,.8);background:color-mix(in oklab,var(--surface) 80%,transparent)}
.l-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
@media(min-width:760px){.l-top{display:contents}}
.l-tag{font-size:9.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--clay-deep)}
.l-row:not(.live) .l-tag{color:var(--faint)}
.l-mid{display:block;min-width:0}
.l-title{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.1vw,25px);line-height:1.18;letter-spacing:-.018em;text-wrap:pretty}
.l-row.live>a:hover .l-title{color:var(--clay-deep)}
.l-row:not(.live) .l-title{color:var(--ink-soft)}
.l-dek{display:block;margin-top:7px;font-size:14.5px;line-height:1.55;color:var(--ink-soft);max-width:62ch;text-wrap:pretty}
.l-meta{display:flex;align-items:center;gap:8px;font-size:9.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
@media(min-width:760px){.l-meta{justify-content:flex-end;grid-column:3;grid-row:1}}
.l-row.live .l-meta{color:var(--clay-deep)}
.l-meta i{width:15px;height:1px;background:currentColor;transition:width .3s cubic-bezier(.2,.8,.2,1)}
.l-row.live>a:hover .l-meta i{width:26px}
.l-how{margin-top:clamp(30px,5vh,48px)}

/* shared CTA card */
.l-cta,.end{margin-top:clamp(28px,4.5vh,44px);border:1px solid var(--line-2);border-radius:16px;background:var(--surface);padding:clamp(20px,3vw,28px);display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.l-cta .k,.end .k{font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--sage-deep)}
.l-cta p,.end p{max-width:54ch;color:var(--ink-soft)}
.go{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 24px;border-radius:999px;background:var(--clay-deep);color:#F8F2E9;font-size:11px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;text-decoration:none;transition:box-shadow .3s,transform .25s,background .2s}
.go:hover{color:#F8F2E9;background:var(--clay);box-shadow:0 22px 40px -20px rgba(190,98,57,.85);transform:translateY(-1px)}
@media(max-width:519px){.l-cta .go,.end .go{width:100%}}

/* ─── post: mobile contents ─── */
.mtoc{margin-top:clamp(22px,3.4vh,30px);border:1px solid var(--line-2);border-radius:14px;background:var(--surface)}
@media(min-width:940px){.mtoc{display:none}}
.mtoc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 18px;cursor:pointer;font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-deep)}
.mtoc summary::-webkit-details-marker{display:none}
.mtoc summary s{margin-left:auto;text-decoration:none;color:var(--faint);letter-spacing:.12em}
.mtoc summary::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg) translateY(-3px);transition:transform .2s;flex:none}
.mtoc[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.mtoc ol,.rb-list ol{list-style:none;counter-reset:t;border-top:1px solid var(--line)}
.mtoc li,.rb-list li{counter-increment:t;border-bottom:1px solid var(--line)}
.mtoc li:last-child{border-bottom:0}
.mtoc a,.rb-list a{display:flex;align-items:baseline;gap:14px;min-height:48px;padding:13px 18px;font-size:15px;line-height:1.35;color:var(--ink);text-decoration:none}
.mtoc a::before,.rb-list a::before{content:counter(t,decimal-leading-zero);flex:none;font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--clay-deep)}
.mtoc a:hover,.rb-list a:hover{color:var(--clay-deep)}
.rb-list a.on{color:var(--clay-deep);font-weight:600}

/* ─── post: reading bar (phones + tablets; desktop has the rail) ─── */
.rbar{position:fixed;top:0;left:0;right:0;z-index:20;background:rgba(244,238,227,.95);background:color-mix(in oklab,var(--paper) 95%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transform:translateY(-102%);transition:transform .28s cubic-bezier(.2,.8,.2,1);padding-top:env(safe-area-inset-top)}
.rbar.show{transform:none}
@media(min-width:940px){.rbar{display:none}}
.rb-row{display:flex;align-items:center;gap:6px;height:52px;max-width:1080px;margin:0 auto;padding:0 clamp(10px,4vw,34px)}
.rb-back{flex:none;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 10px;font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;border-radius:999px}
.rb-back::before{content:"";width:7px;height:7px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.rb-back:hover{color:var(--clay-deep)}
.rb-sec{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:10px;height:44px;padding:0 10px;background:none;border:0;cursor:pointer;font-family:var(--sans);color:var(--ink);text-align:right}
.rb-sec span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600}
.rb-sec b{flex:none;font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--clay-deep)}
.rb-sec::after{content:"";flex:none;width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.rbar.open .rb-sec::after{transform:rotate(-135deg) translateY(-1px)}
.rb-prog{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--clay);transform-origin:left;transform:scaleX(0)}
.rb-list{display:none;max-width:1080px;margin:0 auto;padding:0 clamp(0px,4vw,34px) 8px}
.rbar.open .rb-list{display:block}
.rb-list ol{border-top:1px solid var(--line)}
@media(max-width:939px){.art section{scroll-margin-top:66px}}

/* ─── post: next up ─── */
.next{margin-top:clamp(26px,4vh,40px)}
.next .k{font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.next ul{list-style:none;display:flex;flex-direction:column;margin-top:10px;border-top:1px solid var(--line)}
.next li{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline;padding:14px 2px;border-bottom:1px solid var(--line);color:var(--ink)}
.next li em{grid-column:1/-1;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--faint)}
.next li b{font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.24;color:var(--ink-soft)}
.next li s{text-decoration:none;font-size:9px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.nall{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:10px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.nall::after{content:"";width:16px;height:1px;background:currentColor;transition:width .3s cubic-bezier(.2,.8,.2,1)}
.nall:hover::after{width:28px}

/* ─── post: prose extras (moved from the article) ─── */
.art h2{margin-bottom:2px}
.art section>p:first-of-type{margin-top:14px}
.art .lead{font-family:var(--serif);font-size:clamp(19px,2.2vw,23px);line-height:1.5;font-weight:300;color:var(--ink);max-width:56ch;margin-top:18px}
.art .pull{margin-top:20px;max-width:60ch;font-family:var(--serif);font-size:clamp(19px,2.4vw,26px);line-height:1.32;font-weight:300;font-style:italic;letter-spacing:-.018em;color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}
.art .moves{list-style:none;counter-reset:m;display:flex;flex-direction:column;gap:14px;margin-top:16px;max-width:64ch}
.art .moves li{position:relative;padding-left:40px;color:var(--ink-soft)}
.art .moves li::before{counter-increment:m;content:counter(m,decimal-leading-zero);position:absolute;left:0;top:2px;width:26px;font-family:var(--sans);font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--clay-deep);background:none;border-radius:0;height:auto}
.art .moves b{display:block;color:var(--ink)}

/* ─── post header: dek, byline, short answer ─── */
.dek{font-family:var(--serif);font-size:clamp(18px,2.2vw,22px);line-height:1.45;font-weight:300;color:var(--ink-soft);max-width:54ch;margin-top:14px;text-wrap:pretty}
.byline{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:18px;font-size:12.5px;line-height:1.5;font-weight:600;color:var(--muted)}
.byline b{color:var(--ink);font-weight:700}
.byline>span{display:inline-flex;gap:5px;flex-wrap:wrap}
.short .ans{margin-top:10px;font-family:var(--serif);font-size:clamp(17px,1.9vw,19.5px);line-height:1.5;font-weight:400;color:var(--ink);max-width:62ch;text-wrap:pretty}
.short .k2{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}

/* ─── post body: refs, FAQ, sources ─── */
sup.ref{line-height:0;font-size:10px;font-weight:800;margin-left:1px}
sup.ref a{text-decoration:none;padding:0 2px;color:var(--clay-deep)}
.faq{max-width:68ch}
.faq h3{font-family:var(--serif);font-weight:400;font-size:clamp(18px,2vw,20px);line-height:1.28;letter-spacing:-.01em;color:var(--ink);margin-top:22px}
.faq h3+p{margin-top:6px}
section ol.src{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:10px;margin-top:14px;max-width:68ch;font-size:14px;line-height:1.55}
section ol.src li{counter-increment:s;padding-left:30px;scroll-margin-top:90px;border-radius:6px;transition:background .4s}
section ol.src li::before{content:counter(s);background:none;width:auto;height:auto;top:0;font-size:11px;font-weight:800;color:var(--clay-deep);border-radius:0}
section ol.src li:target{background:rgba(224,145,108,.14);background:color-mix(in oklab,var(--clay-soft) 14%,transparent)}
.disc{font-size:13.5px!important;color:var(--muted)!important}

/* ─── topic hub ─── */
.hub-meta{margin-top:16px}
.l-sub{display:block;font-family:var(--sans);line-height:1.4;margin-top:clamp(30px,5vh,46px);font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.l-sub+.l-list{margin-top:10px}
.l-empty{padding:18px 2px;color:var(--muted);font-size:14.5px;border-bottom:1px solid var(--line)}
.l-chip:hover{text-decoration:none}
.next li b a{color:inherit;text-decoration:none}.next li b a:hover{color:var(--clay-deep)}
.l-bar+.l-sub{margin-top:clamp(18px,3vh,26px)}

/* ─── local: page furniture the design does not draw ─── */
.skip{position:absolute;left:12px;top:-60px;z-index:30;background:var(--clay-deep);color:#F8F2E9;padding:10px 16px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.skip:focus{top:12px;color:#F8F2E9}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.t-intro{margin-top:18px;max-width:68ch}
.t-intro p{font-size:15.5px;line-height:1.68;color:var(--ink-soft);text-wrap:pretty}
.t-intro p+p{margin-top:10px}
.bmore{margin-top:6px}
.bstate-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin-top:clamp(20px,3vh,30px)}
.body.no-toc .wrap{display:block}
.body.no-toc main.doc{max-width:760px}

/* ─── local: what an Opinly post body can contain ───
   The reference post is hand-written; a CMS body can also carry h3s, plain
   numbered lists, quotes, images, tables and rules. Each gets the nearest
   thing the design already has. */
.art section h3{font-family:var(--serif);font-weight:400;font-size:clamp(18px,2vw,20px);line-height:1.28;letter-spacing:-.01em;color:var(--ink);margin-top:24px;max-width:60ch}
.art section h3+p{margin-top:6px}
.art section h4,.art section h5,.art section h6{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-top:20px}
.art strong,.short strong{color:var(--ink);font-weight:700}
.art section>ol:not(.src){list-style:none;counter-reset:m;display:flex;flex-direction:column;gap:12px;margin-top:14px;max-width:64ch;color:var(--ink-soft)}
.art section>ol:not(.src)>li{counter-increment:m;position:relative;padding-left:40px}
.art section>ol:not(.src)>li::before{content:counter(m,decimal-leading-zero);position:absolute;left:0;top:3px;width:26px;height:auto;font-family:var(--sans);font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--clay-deep);background:none;border-radius:0}
.art section li p{margin-top:0}
.art section li>ul,.art section li>ol{margin-top:8px}
.art blockquote{margin-top:20px;max-width:60ch;font-family:var(--serif);font-size:clamp(19px,2.4vw,26px);line-height:1.32;font-weight:300;font-style:italic;letter-spacing:-.018em;color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}
.art blockquote p{margin-top:0;font:inherit;color:inherit;max-width:none}
.art blockquote p+p{margin-top:10px}
.art main img{display:block;max-width:100%;height:auto;border-radius:14px;margin-top:22px;background:var(--surface)}
.art figure{margin-top:22px;max-width:68ch}
.art figure img{margin-top:0}
.art figcaption{margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.art hr{border:0;height:1px;background:var(--line);margin-top:28px;max-width:68ch}
.art code{font-size:.92em;background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:0 4px}
.art pre{margin-top:14px;max-width:68ch;overflow:auto;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:14px 16px}
.art pre code{border:0;padding:0;background:none}
.post-table-wrap{margin-top:18px;max-width:100%;overflow-x:auto;border:1px solid var(--line-2);border-radius:12px}
.post-table-wrap table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.5}
.post-table-wrap th,.post-table-wrap td{text-align:left;vertical-align:top;padding:10px 14px;border-bottom:1px solid var(--line)}
.post-table-wrap th{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-deep);background:var(--surface)}
.post-table-wrap tr:last-child td{border-bottom:0}
.art .faq p{margin-top:6px}
.art .intro>*{max-width:68ch}
.art .intro>p:not(.lead){margin-top:12px;color:var(--ink-soft);text-wrap:pretty}
.art .intro>ul,.art .intro>ol{margin-top:12px}
.art .disc-only{padding-top:clamp(24px,4vh,36px)}

/* tags, and the author card */
.btags{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(24px,4vh,36px)}
.bchip{display:inline-flex;align-items:center;min-height:36px;padding:0 13px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.bchip:hover{color:var(--ink);border-color:var(--clay-soft)}
.bauthor{display:flex;gap:16px;align-items:flex-start;margin-top:clamp(24px,4vh,36px);max-width:68ch}
.bauthor .k{font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.bauthor-face{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--surface);margin-top:0!important}
.bauthor-name{font-family:var(--serif);font-size:20px;line-height:1.25;margin-top:4px}
.bauthor-name a{color:var(--ink);text-decoration:none}
.bauthor-name a:hover{color:var(--clay-deep)}
.bauthor-bio{margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.l-row>a.bauthor-row{display:flex;gap:16px;align-items:center;margin-top:0;max-width:none}
.bauthor-hero{margin-top:18px}
.bauthor-hero .bauthor-face{width:72px;height:72px}
.byline a{color:inherit;text-decoration:none}
.byline a:hover{color:var(--clay-deep)}