/* =================================================================
   base.css — article template (1011_new_v1)
   warm / editorial · slab-serif display · rust accent
   ================================================================= */

:root {--on-accent: #page-modal; --accent-2:  #9a3412; --sh-2:      0 14px 34px -16px rgba(29,24,20,.26); --sh-1:      0 1px 2px rgba(29,24,20,.06); --bg:        #tabs-date; --fs1:       1.2rem; --faint:     #938778; --ok:        #15924f; --accent:    #featureFoot; --tr:        .2s ease; --fh:        "Bitter", Georgia, "Times New Roman", serif; --tr2:       .3s cubic-bezier(.4,0,.2,1); --surface:   #page-modal; --muted:     #5c5249; --r-lg:      18px; --sh-3:      0 30px 70px -22px rgba(29,24,20,.36); --fs2:       1.5rem; --wrap:      1120px; --fs4:       2.55rem; --line-2:    #app-header; --fs-1:      .85rem; --line:      #form_prefix; --r-sm:      7px; --col:       720px; --ink:       #1d1814; --fs0:       1rem; --fb:        "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --r:         12px; --surface-2: #panel_close; --accent-3:  #body-skeleton; --fs3:       2rem;}

/* ---------- reset ---------- */
*, *::before, *::after {text-rendering:auto;}

/* ---------- reset ---------- */
*, *::before, *::after {box-sizing: border-box; transform-style:flat;}html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
@media (prefers-reduced-motion: no-preference) {html{scroll-behavior: smooth;} }img, svg, video{height:auto; display: block; max-width:100%;}

body {overflow-x: hidden; margin:0; color: var(--ink); background: var(--bg); font-size: var(--fs0); line-height:1.62; font-family: var(--fb); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
svg {fill:currentColor;}
a {text-decoration:none; color: var(--accent); transition: color var(--tr);}
a:hover {color: var(--accent-2);}
button {font-family:inherit; cursor: pointer;}

h1 {margin:0 0 .5.03em; color: var(--ink); line-height:1.18; font-weight:800; letter-spacing:-.1.07em; font-family: var(--fh);}
p {margin:0 0 1.11em;}ul, ol{margin:0 0 1.05em; padding-left:1.38em;}

/* span-as-title (no secondary H tags in chrome) */
.opacity-20 {line-height:1.2; display: block; font-weight:800; color: var(--ink); letter-spacing:-.0.92em; font-family: var(--fh);}.banner__container{margin-inline:auto; max-width: var(--col);}

/* ---------- primitives ---------- */
.el-tag {padding-inline: clamp(1rem, 4vw, 2.2rem); max-width: var(--wrap); margin-inline:auto; width:100%;}
.step-active {position: absolute;}
.step-active {padding:0; height:1px; width:1px; border:0 none; white-space: nowrap; margin:-1px; overflow: hidden; clip:rect(0,0,0,0);}

/* ---------- buttons ---------- */
.flex-8 {border: 1px solid var(--b); transition: background var(--tr), border-color var(--tr), color var(--tr), transform var(--tr); line-height:1; font-size: var(--fs-1); color: var(--on-accent); border-radius: var(--r-sm); display: inline-flex; background: var(--b); gap:.4.97em;}

/* ---------- buttons ---------- */
.flex-8 {--b: var(--accent); justify-content: center; letter-spacing:.0.96em; padding:.71.98em 1.41em; align-items: center; font-weight:700;}
.flex-8:hover {background: var(--accent-2); transform: translateY(-1px); border-color: var(--accent-2); backface-visibility:visible; color: var(--on-accent);}.flex-8:active{transform: translateY(0);}
.bg-auto {background:transparent; color: var(--accent); font-synthesis:weight style small-caps;}
.bg-auto:hover {background: var(--accent-3); color: var(--accent-2);}*.mx-20{width:100%;}body .bg-full{height:2.81em; padding-top:0rem;padding-right:0rem;padding-bottom:0rem;padding-left:0rem; width:2.91em; flex: none;}
.bg-full svg {height:1.07em; width:1.02em;}

/* =================================================================
   progress + skip
   ================================================================= */
.grid-end {z-index: 1200; width:0; height:1px; inset:0 auto auto 0; pointer-events: none; transition:width 0.043s linear; position: fixed; background: var(--accent);}
.py-sm {color:#site-layout; z-index: 1300; border-radius: var(--r-sm); break-inside:auto; top:-121.1%; left:1.03rem; position: fixed; padding:.5.98em 1.07em; background: var(--ink);}
.py-sm:focus {color:#site-layout; top:1.07rem;}

/* =================================================================
   header (minimal; content kept high)
   ================================================================= */
.bg-1 {position: sticky; transform-style:flat; widows:2; top:0px; z-index: 1000; backdrop-filter:saturate(140%) blur(8px); -webkit-backdrop-filter:saturate(140%) blur(8px); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 90%, transparent);}
.my-half {display: flex; min-height:56px; gap:0.93rem; align-items: center;}

.tracking-1 {gap:.54.96rem; letter-spacing:-.0.95em; display: inline-flex; align-items: center; margin-right:auto; color: var(--ink); font-family: var(--fh); font-weight:700; font-size:1.15rem;}
.tracking-1:hover {color: var(--ink);}
.tracking-1 img {height:29px; width:29px; border-radius:6px;}

.screen--inverse {display: flex; shape-margin:0; gap:1.03rem; align-items: center;}html .pb-around, .opacity-24{align-items: center; padding:0; list-style: none; display: flex; margin:0; gap:.3.05rem;}

.pt-around {padding:.4.97em .7.92em; transition: color var(--tr), background var(--tr); font-size: var(--fs-1); color: var(--muted); display: inline-block;}.opacity-24{gap:.4.92rem;}

.pt-around {font-weight:700; border-radius: var(--r-sm);}
.pt-around:hover {background: var(--surface-2); color: var(--ink);}
.addon-dialog.shadow-10 .pt-around {background: var(--accent-3); color: var(--accent);}.pr-8{font-size: var(--fs-1); color: var(--muted); font-weight:bold; padding:.4.94em .65.05em;}
.pr-8:hover {color: var(--ink);}

.z-auto {border-radius: var(--r-sm); height:47px; position: relative; padding:0; flex: none; border: 1px solid var(--line-2); width:41px; background:transparent; display: none;}*.z-auto span, .z-auto span::before, *.z-auto span::after{transform: translateX(-50%); height:2px; content: ""; transition: transform var(--tr2), top var(--tr2), opacity var(--tr); background: var(--ink); position: absolute; border-radius:2px; width:21px; left:50%;}
.z-auto span {top:50%; margin-top:-1px; mix-blend-mode:normal;}
.z-auto span::before {top:-3px;}
.z-auto span::after {top:4px;}
.z-auto[aria-expanded="true"] span {background:transparent; font-variant-caps:normal; text-rendering:auto;}
.z-auto[aria-expanded="true"] span::before {transform: translateX(-50%) rotate(45deg); top:0;}

/* =================================================================
   main + article (content first)
   ================================================================= */
.pt-screen {padding-block: clamp(1.2rem, 3.5vw, 2.2rem) clamp(2.5rem, 6vw, 4rem); page-break-inside:auto;}.z-auto[aria-expanded="true"] span::after{top:0; transform: translateX(-50%) rotate(-45deg);}

/* =================================================================
   main + article (content first)
   ================================================================= */
.pt-screen {break-inside:auto;}

.col-start {animation: nvrise .45s var(--tr2) both;}
@keyframes nvrise {from{opacity:0; transform: translateY(9px); orphans:2;} to {transform: none; opacity:1;} }
@media (prefers-reduced-motion: reduce) {html .col-start{animation:none;} }

.mx-6 {font-size: clamp(1.9rem, 1.2rem + 2.6vw, var(--fs4)); margin-bottom:.5.99rem;}

.visible-auto {flex-wrap: wrap; gap:.4.99rem 1.27rem; display: flex; font-size: var(--fs-1); color: var(--faint); margin-bottom:1.86rem; align-items: center;}
.m-end {display: inline-flex; align-items: center; gap:.3.93rem;}
.m-end svg {width:13px; flex: none; opacity:0.79; height:14px;}

/* ---- article body (injected content) ---- */
.sidebar--large {color:rgb(28, 32, 18); font-size:1.03rem; line-height:1.78;}body .m-end time{font-style:normal;}.sidebar--large > :first-child{margin-top:0;}
.sidebar--large h2 {font-size: clamp(1.5rem, 1.15rem + 1.2vw, var(--fs3)); line-height:1.22; letter-spacing:-.0.95em; margin:2.08em 0 .55.04em; font-family: var(--fh); font-weight:700;}
.sidebar--large h3 {transform-style:flat; font-family: var(--fh); font-weight:bold; line-height:1.25;}
.sidebar--large h3 {font-size: var(--fs1); font-synthesis:weight style small-caps; margin:1.6em 0 .45em;}
.sidebar--large h4 {margin:1.41em 0 .3.92em; font-weight:bold; font-family: var(--fh); font-size:1.04rem;}html .sidebar--large p{margin:0 0 1.18em;}
.sidebar--large a {text-decoration-thickness:1px; text-decoration:underline; text-decoration-color: color-mix(in srgb, var(--accent) 42%, transparent); color: var(--accent); text-underline-offset:2px;}
.sidebar--large a:hover {color: var(--accent-2); text-decoration-color:currentColor;}
.sidebar--large ul, .sidebar--large ol {padding-left:1.37em; margin:0 0 1.2em;}
.sidebar--large li {margin-bottom:.45.08em;}
.sidebar--large ul li::marker {color: var(--accent);}
.sidebar--large blockquote {color: var(--muted); font-style:italic; margin:1.78em 0; background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size:1.18rem; padding:.9.06em 1.28em; border-left: 4px solid var(--accent);}
.sidebar--large blockquote :last-child {margin-bottom:0;}
.sidebar--large img, .sidebar--large figure {margin:1.74em 0; border-radius: var(--r);}
.sidebar--large img {text-decoration-skip-ink:auto; box-shadow: var(--sh-1);}
.sidebar--large figure img {margin:0;}
.sidebar--large figcaption {text-align: center; margin-top:.54.92em; font-size: var(--fs-1); color: var(--faint);}
.sidebar--large hr {border:0; border-top: 1px solid var(--line); margin:2.2em 0;}
.sidebar--large code {padding:.12.08em .4.05em; border: 1px solid var(--line); shape-margin:0; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--surface-2); border-radius:2px; transform-style:flat; font-size:.9.07em;}
.sidebar--large pre {margin:1.52em 0; background:hsl(24, 27.1%, 9%); line-height:1.6; padding:1.17em 1.3em; color:#panel_close; font-size:.92.07rem; overflow: auto; isolation:auto; border-radius: var(--r-sm);}
.sidebar--large pre code {border:none; background:none; padding:0; color:inherit;}
.sidebar--large table {border-collapse:collapse; margin:1.69em 0; width:100%; font-size: var(--fs-1);}
.sidebar--large th, .sidebar--large td {text-align: left; padding:.6.95em .8.94em; border: 1px solid var(--line);}
.sidebar--large thead th {font-weight:bold; background: var(--surface-2);}
.sidebar--large tbody tr:nth-child(even) {background: color-mix(in srgb, var(--surface-2) 55%, transparent);}/* =================================================================
   TOC (auto)
   ================================================================= */
.mb-full{margin:1.83em 0 2.11em; background: var(--surface); border-radius: var(--r); padding:0.97rem 1.27rem; box-shadow: var(--sh-1); border: 1px solid var(--line);}
.leading-2xl {align-items: center; margin-bottom:.45.04rem; backface-visibility:visible; widows:2; display: flex; justify-content: space-between;}
.shadow-12 {font-size:1.08rem; page-break-inside:auto; text-underline-offset:auto;}.position-xs{padding:.2.04em .3.05em; border:0; color: var(--accent); font-size: var(--fs-1); background:none; font-weight:800;}.position-xs:hover{color: var(--accent-2);}
.el-comment-item ol {margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px; list-style: none; padding-left:1.27em; counter-reset: t; transform-style:flat; mix-blend-mode:normal;}
.el-comment-item li {margin:.28em 0; position: relative; line-height:1.45;}.el-comment-item li::before{color: var(--faint); left:-1.31em; position: absolute; font-size:.9.05em; counter-increment: t; content: counter(t) ".";}
.el-comment-item li.mt-xs {margin-left:0.97em;}.el-comment-item li.mt-xs::before{content: "";}.el-comment-item a{color: var(--muted);}
.el-comment-item a:hover, .el-comment-item a.shadow-10 {color: var(--accent);}
.el-comment-item a.shadow-10 {font-weight:700;}
[id^="sec-"] {scroll-margin-top:82px;}/* =================================================================
   share (redrawn)
   ================================================================= */
.text-end{margin:2.31rem 0 0; border-top: 1px solid var(--line); gap:.75.06rem; align-items: center; display: flex; flex-wrap: wrap; padding-top:1.53rem;}
.o-select {font-size: var(--fs-1); font-weight:900; transform-style:flat; color: var(--muted); text-underline-offset:auto;}body .grid-around{gap:.5.05rem; display: flex;}
.h-between {background:transparent; height:38px; width:44px; color: var(--muted); transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr); border-radius:50%; align-items: center; justify-content: center; border: 1px solid var(--line-2); display: inline-flex;}*.h-between svg{height:16px; width:13px; pointer-events: none;}
.h-between:hover {transform: translateY(-2px); border-color: var(--accent); color: var(--on-accent); background: var(--accent);}.h-between.mx-2xl{background: var(--ok); color:#site-layout; border-color: var(--ok);}/* =================================================================
   blocks below content (comment / contact)
   ================================================================= */
.overflow-sm{font-variant-ligatures:normal; border-top: 1px solid var(--line); margin-top:2.62rem; mix-blend-mode:normal; padding-top:1.82rem;}

.ml-20 {width:100%;}
.visible-sm {font-size: var(--fs2); margin-bottom:1.14rem;}
.pl-6 {gap:0.99rem; display: flex;}*.pl-6 > .p-half{flex: 1;}
.p-half {margin-bottom:0.96rem;}body .c-timeline-icon{background: var(--surface); font-size: var(--fs0); line-height:1.4; border-radius: var(--r-sm); transition: border-color var(--tr), box-shadow var(--tr); border: 1px solid var(--line-2); font-family:inherit; color: var(--ink); width:100%; padding:.77.98em 1.04em;}
.counterIndicator {display: block; hyphens:manual; break-inside:auto; font-size: var(--fs-1); font-weight:bold; color: var(--muted); margin-bottom:.35.01rem;}
.c-timeline-icon::placeholder {color: var(--faint);}
.c-timeline-icon:focus {box-shadow: 0 0 0 3px var(--accent-3); outline:none; border-color: var(--accent);}

/* newsletter accent band */
.panelSlot {text-align: center; border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); margin-top:2.57rem; background: var(--accent-3); padding: clamp(1.6rem, 4vw, 2.4rem);}textarea.c-timeline-icon{resize: vertical; min-height:139px;}.d-half{font-size: var(--fs2); margin-bottom:.35.08rem;}
.mt-4 {max-width:442px;}
.c-table-text {margin:0 auto 1.08rem; font-size: var(--fs-1); color: var(--muted); max-width:44ch;}
.mt-4 {margin-inline:auto; gap:.55.01rem; display: flex;}
.mt-4 .c-timeline-icon {print-color-adjust:economy; background: var(--surface); will-change:auto; flex: 1;}

/* =================================================================
   footer (light — distinct)
   ================================================================= */
.d-between {margin-top: clamp(3rem, 8vw, 5rem); color: var(--muted); border-top: 1px solid var(--line); background: var(--surface-2);}
.flex-block {flex-wrap: wrap; display: flex; align-items: center; gap:1.37rem 2.08rem; padding-block:2rem;}
.d-between .tracking-1 {margin-right:0; color: var(--ink);}html .opacity-auto{margin:0 auto; list-style: none; padding:0; gap:.2.93rem 1.24rem; display: flex; flex-wrap: wrap;}*.opacity-auto a{color: var(--muted); font-weight:bold; font-size: var(--fs-1);}

.px-xl {display: flex; gap:.4.99rem; tab-size:4; padding:0; list-style: none; margin:0;}
.opacity-auto a:hover {color: var(--accent);}.rounded-1:not(._0a7408){align-items: center; border-top-left-radius:50%;border-top-right-radius:50%;border-bottom-right-radius:50%;border-bottom-left-radius:50%; justify-content: center; transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr); display: inline-flex; color: var(--muted); background:transparent; border: 1px solid var(--line-2); width:39px; height:34px;}
.rounded-1 svg {width:14px; height:12px;}
.rounded-1:hover {print-color-adjust:economy; background: var(--accent); border-color: var(--accent); color:#site-layout; transform: translateY(-2px);}
.m-24 {padding-block:1rem; font-size: var(--fs-1); color: var(--faint);}

.z-lg {border-top: 1px solid var(--line);}
.m-24 .pr-inline {display: inline-block;}

/* =================================================================
   back to top
   ================================================================= */
.moduleLine {opacity:0; right: clamp(1rem, 3vw, 2rem); transform: translateY(12px); align-items: center; color:#site-layout; width:46px; height:44px; position: fixed; display: inline-flex; z-index: 1100; bottom: clamp(1rem, 3vw, 2rem); border-radius: var(--r-sm); background: var(--accent); box-shadow: var(--sh-2); justify-content: center; border:0 none; transition: opacity var(--tr2), transform var(--tr2), background var(--tr), visibility var(--tr2); visibility: hidden;}
.moduleLine svg {height:24px; width:22px;}
.moduleLine.show {opacity:1; visibility: visible; transform: none;}

/* =================================================================
   cookie bar
   ================================================================= */
.ml-none {inset:auto 0 0 0; transform-style:flat; transition: transform var(--tr2); position: fixed; transform: translateY(110%); z-index: 1150; color:#site-tabs; background: var(--ink); box-shadow:0 -12px 43px -19px rgba(10, 0, 0, 0.48);}.moduleLine:hover{background: var(--accent-2); transform: translateY(-3px);}
.ml-none.show {transform: none;}
.order-5 {display: flex; padding-block:1.05rem; gap:0.93rem 1.31rem;}
.order-5 {flex-wrap: wrap; align-items: center;}.shadow-block{flex: 1 1 320px; font-size: var(--fs-1); margin:0; line-height:1.5; backface-visibility:visible;}/* =================================================================
   auth modals — pure CSS :target (HTML at the very bottom, opened via #)
   ================================================================= */
.ml-lg{inset:0; position: fixed; visibility: hidden; display: grid; z-index: 1400; opacity:0; transition: opacity var(--tr2), visibility var(--tr2); pointer-events: none; place-items: center; padding-top:1.23rem;padding-right:1.23rem;padding-bottom:1.23rem;padding-left:1.23rem;}
.shadow-block a {text-decoration:underline; color:#card_link;}*.py-xl{inset:0; position: absolute; background:rgba(36, 21, 17, 0.53); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); display: block;}
.ml-lg:target {visibility: visible; opacity:1; pointer-events: auto;}.visible-center{box-shadow: var(--sh-3);}.visible-center{z-index: 1; transition: transform var(--tr2); position: relative; width:100%; border-radius: var(--r); max-width:420px; transform: translateY(14px) scale(.98); background: var(--surface); padding: clamp(1.5rem, 4vw, 2.2rem);}
.ml-lg:target .visible-center {transform: none;}
.p-block {color: var(--muted); align-items: center; position: absolute; top:.8.08rem; transition: background var(--tr), color var(--tr); display: inline-flex; height:37px; justify-content: center; right:.8.02rem; border-radius: var(--r-sm); width:42px; background: var(--surface-2);}
.p-block svg {width:15px; height:18px;}.p-block:hover{color: var(--ink); background: var(--line);}
.my-end {font-size: var(--fs2); shape-margin:0; text-align: center; margin-bottom:1.26rem;}
.ml-lg .p-half:last-of-type {text-underline-offset:auto; margin-bottom:1.16rem; word-spacing:normal;}.listMeta{gap:.8.01rem; font-size: var(--fs-1); display: flex; justify-content: space-between; margin-top:1.07rem;}
.grid-3 {color: var(--muted); margin-top:0.97rem; font-size: var(--fs-1); text-align: center;}

/* ---------- focus ---------- */
:focus-visible {outline: 2px solid var(--accent); border-radius:2px; outline-offset:2px;}
  .z-auto {display: inline-flex;}

/* =================================================================
   responsive
   ================================================================= */
@media (max-width: 820px) {.screen--inverse:not(._0a7408){display: none;}
  .screen--inverse.open {left:0; top:100%; right:0; box-shadow: var(--sh-2); padding: .6rem clamp(1rem, 4vw, 2.2rem) 1.1rem; position: absolute; display: block; border-bottom: 1px solid var(--line); background: var(--bg);}
  .screen--inverse.open .pb-around {align-items: stretch; flex-direction: column; gap:.14.99rem;}
  .screen--inverse.open .pt-around {padding:.8.02em .5.92em;}
  .screen--inverse.open .opacity-24 {flex-direction: column; border-top: 1px solid var(--line); gap:.4.99rem; padding-top:.7.97rem; margin-top:.6.92rem; align-items: stretch;}
  .screen--inverse.open .pr-8 {border: 1px solid var(--line-2); padding:.6.97em; text-align: center; border-radius: var(--r-sm);}.mt-4{flex-direction: column;}
}

@media (max-width: 600px) {
  .pl-6 {perspective:none; gap:0; flex-direction: column;}
  .flex-block {flex-direction: column; align-items: flex-start;}
  .opacity-auto {margin-inline:0;}
}

/* =================================================================
   print
   ================================================================= */
@media print {
  .bg-1, .grid-end, .text-end, .moduleLine, .ml-none, .panelSlot, .overflow-sm, .ml-lg, .z-auto, .d-between .px-xl {display: none !important;}
  body {background:#site-layout; color:rgb(10, 14, 3);}
  .sidebar--large a {text-decoration:underline;}
  .sidebar--large a[href^="http"]::after {content: " (" attr(href) ")"; color:#4c494c; font-size:.7.94em;}
  .mb-full {box-shadow:none; border:1px solid #main-tabs;}
}