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

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

/* ---------- reset ---------- */
*, *::before, *::after {box-sizing: border-box;}
html {text-size-adjust:100%; -webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion: no-preference) { html {scroll-behavior: smooth;} }body{margin:0em; font-family: var(--fb); -webkit-font-smoothing:antialiased; overflow-x: hidden; color: var(--ink); text-rendering:optimizeLegibility; background: var(--bg); line-height:1.62; font-size: var(--fs0);}

img, svg, video {height:auto;}
svg {fill:currentColor;}

img, svg, video {max-width:100%; display: block;}
a {text-decoration:none; color: var(--accent); transition: color var(--tr);}
a:hover {color: var(--accent-2);}
button {cursor: pointer; font-family:inherit;}h1{font-weight:900; margin:0 0 .5.06em; letter-spacing:-.0.92em; line-height:1.18; font-family: var(--fh); color: var(--ink);}
p {margin:0 0 1.1em;}
ul, ol {padding-left:1.38em; margin:0 0 1.13em;}

/* ---------- primitives ---------- */
.avatar__link--flat {max-width: var(--wrap);}

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

/* ---------- primitives ---------- */
.avatar__link--flat {width:100%; margin-inline:auto; padding-inline: clamp(1rem, 4vw, 2.2rem);}
.dialog {border:0em; padding:0; margin:-1px; position: absolute; overflow: hidden; height:1px; width:1px; white-space: nowrap; clip:rect(0,0,0,0);}

/* ---------- buttons ---------- */
.gallery--sticky {align-items: center; padding:.72.01em 1.43em; font-size: var(--fs-1); border: 1px solid var(--b); justify-content: center; transition: background var(--tr), border-color var(--tr), color var(--tr), transform var(--tr); border-radius: var(--r-sm); letter-spacing:.1.01em; display: inline-flex; font-weight:700; gap:.5em; line-height:1; background: var(--b); color: var(--on-accent); --b: var(--accent);}
.gallery--sticky:hover {background: var(--accent-2); color: var(--on-accent); border-color: var(--accent-2); transform: translateY(-1px);}
.gallery--sticky:active {transform: translateY(0);}
.ui-card-name {color: var(--accent); isolation:auto; background:transparent; text-decoration-skip-ink:auto;}
.hero__primary--hover {width:100%;}
.ui-card-name:hover {color: var(--accent-2); background: var(--accent-3);}.counter__dot{width:2.9em; height:2.84em; padding:0; flex: none;}/* =================================================================
   progress + skip
   ================================================================= */
.opacity-6{pointer-events: none; height:3px; background: var(--accent); inset:0 auto auto 0; width:0; z-index: 1200; transition:width 0.158s linear; position: fixed;}body .counter__dot svg{height:1.06em; width:0.99em;}
.thread {isolation:auto; color:#drawer-subtitle; position: fixed; background: var(--ink); top:-119%; contain:none; z-index: 1300; left:0.95rem; padding:.5.98em 0.98em; border-radius: var(--r-sm);}
.thread:focus {top:0.96rem; color:#drawer-subtitle;}
.entry {min-height:61px; gap:0.99rem; display: flex; align-items: center;}/* =================================================================
   header (minimal; content kept high)
   ================================================================= */
.nav{position: sticky; backdrop-filter:saturate(140%) blur(8px); -webkit-backdrop-filter:saturate(140%) blur(8px); top:0; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 90%, transparent); z-index: 1000;}

.sidebar-compact {font-family: var(--fh); align-items: center; margin-right:auto; color: var(--ink); background-blend-mode:normal; letter-spacing:-.0.93em; font-variant-caps:normal; font-weight:700; font-size:1.15rem; display: inline-flex; gap:.55.04rem;}body .sidebar-compact:hover{color: var(--ink);}
.sidebar-compact img {border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px; height:32px; width:34px;}

.l-alert-value {align-items: center; gap:1.03rem; display: flex;}
.timeline--loading, .slider__secondary {display: flex; padding:0; margin:0; list-style: none; align-items: center; gap:.2.92rem;}
.slider__secondary {gap:.4.95rem;}

.step {border-radius: var(--r-sm); color: var(--muted); padding:.5em .8em; font-weight:700; font-size: var(--fs-1); display: inline-block; transition: color var(--tr), background var(--tr);}.step:hover{-moz-tab-size:4;text-decoration-skip-ink:auto; color: var(--ink); tab-size:4;}.step:hover{background: var(--surface-2);}
.accordion__tertiary--success.moduleOverlay .step {background: var(--accent-3); color: var(--accent);}*.dropdown--inverse{color: var(--muted); font-size: var(--fs-1); padding:.4.96em .65.05em; font-weight:bold;}
.dropdown--inverse:hover {color: var(--ink);}

.snackbar__cap {height:42px; background:transparent; border-radius: var(--r-sm); padding:0em; position: relative; border: 1px solid var(--line-2); width:47px; flex: none; display: none;}
.snackbar__cap span, .snackbar__cap span::before, .snackbar__cap span::after {left:50%; content: ""; background: var(--ink); border-radius:2px; height:2px; width:23px; transform: translateX(-50%); transition: transform var(--tr2), top var(--tr2), opacity var(--tr); position: absolute;}
.snackbar__cap span {margin-top:-1px; background-blend-mode:normal; top:50%;}
.snackbar__cap span::before {top:-5px;}
.snackbar__cap span::after {top:4px; will-change:auto;}html .snackbar__cap[aria-expanded="true"] span{background:transparent;}
.snackbar__cap[aria-expanded="true"] span::before {top:0; transform: translateX(-50%) rotate(45deg);}
.snackbar__cap[aria-expanded="true"] span::after {transform: translateX(-50%) rotate(-45deg); top:0;}

/* =================================================================
   main + article (content first)
   ================================================================= */
.breadcrumb {padding-block: clamp(1.2rem, 3.5vw, 2.2rem) clamp(2.5rem, 6vw, 4rem);}

.list__wrap {animation: nvrise .45s var(--tr2) both;}
@keyframes nvrise {from{opacity:0; transform: translateY(9px);} to {transform: none; opacity:1;} }
@media (prefers-reduced-motion: reduce) { .list__wrap {animation:none;} }.layoutPreview{margin-bottom:.6.08rem; font-size: clamp(1.9rem, 1.2rem + 2.6vw, var(--fs4));}

.feature__preview {color: var(--faint); align-items: center; flex-wrap: wrap; display: flex; gap:.5.03rem 1.26rem; margin-bottom:1.84rem; font-size: var(--fs-1);}
.hero__addon {gap:.4.03rem; display: inline-flex; align-items: center;}
.hero__addon svg {flex: none; width:18px; height:15px; opacity:0.79;}
.hero__addon time {font-style:normal;}/* ---- article body (injected content) ---- */
.skeleton--filled{font-size:1.15rem; line-height:1.78; color:#342927;}.skeleton--filled > :first-child{margin-top:0em; text-decoration-skip-ink:auto;}
.skeleton--filled h2 {font-weight:700; hyphens:manual; font-size: clamp(1.5rem, 1.15rem + 1.2vw, var(--fs3)); line-height:1.22; font-family: var(--fh); margin:1.96em 0 .54.94em; letter-spacing:-.0.99em;}
.skeleton--filled h3 {font-size: var(--fs1); margin:1.59em 0 .45.03em; font-family: var(--fh); font-weight:bold; line-height:1.25;}.skeleton--filled h4{mix-blend-mode:normal; margin:1.48em 0 .3.92em; font-size:1.14rem; font-family: var(--fh); text-rendering:auto; font-weight:700;}
.skeleton--filled p {margin:0 0 1.18em;}
.skeleton--filled a {text-decoration:underline; text-decoration-thickness:1px; color: var(--accent); text-underline-offset:2px; text-decoration-color: color-mix(in srgb, var(--accent) 42%, transparent);}
.skeleton--filled a:hover {text-decoration-color:currentColor; hyphens:manual;}
.skeleton--filled a:hover {color: var(--accent-2);}
.skeleton--filled ul, .skeleton--filled ol {margin:0 0 1.17em; padding-left:1.46em;}.skeleton--filled li{margin-bottom:.45.02em; font-variant-caps:normal;}
.skeleton--filled ul li::marker {color: var(--accent);}
.skeleton--filled blockquote {margin:1.63em 0; color: var(--muted); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; border-left: 4px solid var(--accent); font-size:1.1rem; padding:.9.03em 1.25em; font-style:italic;}
.skeleton--filled blockquote :last-child {margin-bottom:0em;}
.skeleton--filled img, .skeleton--filled figure {margin:1.63em 0; border-radius: var(--r);}
.skeleton--filled img {box-shadow: var(--sh-1);}
.skeleton--filled figure img {margin:0;}
.skeleton--filled figcaption {color: var(--faint); text-align: center; font-size: var(--fs-1); margin-top:.55em;}
.skeleton--filled hr {border-top: 1px solid var(--line); border:0 none; margin:2.25em 0;}.skeleton--filled code{padding:.12.04em .4.07em; background: var(--surface-2); font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.9em; border-radius:7px; border: 1px solid var(--line);}
.skeleton--filled pre {padding:1.05em 1.38em; color:#main-grid; overflow: auto; line-height:1.6; margin:1.58em 0; background:#292209;}
.skeleton--filled pre {font-size:.92.08rem; border-radius: var(--r-sm);}.skeleton--filled pre code{border:0; padding:0;}.skeleton--filled pre code{background:none; color:inherit;}
.skeleton--filled table {font-size: var(--fs-1); border-collapse:collapse; margin:1.66em 0; width:100%;}
.skeleton--filled th, .skeleton--filled td {border: 1px solid var(--line); padding:.6.96em .9.01em; text-align: left;}
.skeleton--filled thead th {background: var(--surface-2); font-weight:700;}
.skeleton--filled tbody tr:nth-child(even) {background: color-mix(in srgb, var(--surface-2) 55%, transparent);}/* =================================================================
   TOC (auto)
   ================================================================= */
.spinner--wide{padding:1.08rem 1.43rem; background-blend-mode:normal; font-variant-ligatures:normal; box-shadow: var(--sh-1); margin:1.87em 0 2.1em; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);}
.rating {display: flex; margin-bottom:.45.05rem; justify-content: space-between; align-items: center;}
.ui-dropdown-holder {font-size:1.01rem;}
.nav__button--default {padding:.1.99em .3.06em; background:none; font-weight:700;}
.nav__button--default {text-decoration-skip-ink:auto; shape-margin:0; border:0 none; font-size: var(--fs-1); color: var(--accent);}html .nav__button--default:hover{color: var(--accent-2);}
.position-half ol {margin:0; padding-left:1.19em; counter-reset: t; list-style: none;}
.position-half li {position: relative; contain:none; margin:.28.04em 0; line-height:1.45; print-color-adjust:economy;}
.position-half li::before {color: var(--faint); counter-increment: t; left:-1.24em; position: absolute; content: counter(t) "."; font-size:.9.05em;}html .position-half li.u-entry{margin-left:1.02em;}
.position-half li.u-entry::before {content: "";}
.position-half a {color: var(--muted);}
.position-half a:hover, .position-half a.moduleOverlay {color: var(--accent);}
.position-half a.moduleOverlay {font-weight:bold; backface-visibility:visible; isolation:auto;}
[id^="sec-"] {page-break-inside:auto; print-color-adjust:economy; scroll-margin-top:82px;}/* =================================================================
   share (redrawn)
   ================================================================= */
.modal__cap--first{align-items: center; padding-top:1.49rem; gap:.74.93rem; display: flex; margin:2.27rem 0 0; border-top: 1px solid var(--line); flex-wrap: wrap;}
.selectWrapper {font-size: var(--fs-1); font-weight:800;}
.selectWrapper {color: var(--muted);}
.banner {align-items: center; width:42px; background:transparent; display: inline-flex; border: 1px solid var(--line-2); border-radius:50%; transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr); justify-content: center; color: var(--muted); height:44px;}
.pagination__spacer--narrow {display: flex; gap:.5.02rem;}
.banner svg {width:14px;}
.banner svg {pointer-events: none; height:13px;}
.banner:hover {color: var(--on-accent); border-color: var(--accent); transform: translateY(-2px); background: var(--accent);}

/* =================================================================
   blocks below content (comment / contact)
   ================================================================= */
.layout--center {padding-top:1.83rem; margin-top:2.54rem; border-top: 1px solid var(--line);}
.banner.thread--inverse {color:#drawer-subtitle; border-color: var(--ok); background: var(--ok);}
.modal__overlay--vertical {margin-bottom:1.18rem; isolation:auto; font-size: var(--fs2); orphans:2;}

.page__data {width:100%;}*.toggle__wrap{image-rendering:auto; gap:0.99rem;}*.toggle__wrap{display: flex;}body .toggle__wrap > .post__area--center{flex: 1;}
.post__area--center {margin-bottom:1.05rem;}.profile__wrap{color: var(--muted); font-weight:bold; margin-bottom:.35.01rem; display: block; font-size: var(--fs-1);}
.tag {transition: border-color var(--tr), box-shadow var(--tr); background: var(--surface); border: 1px solid var(--line-2); font-family:inherit; border-radius: var(--r-sm); font-size: var(--fs0); padding:.78em 0.94em; color: var(--ink); width:100%; line-height:1.4;}
.tag::placeholder {color: var(--faint);}
.tag:focus {outline:none; box-shadow: 0 0 0 3px var(--accent-3); border-color: var(--accent);}
textarea.tag {min-height:143px; resize: vertical;}

/* newsletter accent band */
.status--dark {background: var(--accent-3); border-radius: var(--r-lg); margin-top:2.54rem; padding: clamp(1.6rem, 4vw, 2.4rem); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); text-rendering:auto; text-align: center;}
.action-drawer {font-size: var(--fs2); margin-bottom:.35.03rem;}
.counter--alt {color: var(--muted);}
.counter--alt {margin:0 auto 1.14rem; max-width:44ch; font-size: var(--fs-1);}.popover__image--wide{max-width:437px;}.popover__image--wide{display: flex; margin-inline:auto; gap:.54.97rem;}

/* =================================================================
   footer (light — distinct)
   ================================================================= */
.avatar__label {background: var(--surface-2); border-top: 1px solid var(--line); color: var(--muted); margin-top: clamp(3rem, 8vw, 5rem);}
.popover__image--wide .tag {flex: 1; background: var(--surface);}
.slider--muted {display: flex; align-items: center; gap:1.27rem 1.96rem; flex-wrap: wrap; padding-block:2rem;}.avatar__label .sidebar-compact:not(._ff1de6){margin-right:0; color: var(--ink);}.moduleBar:not(._ff1de6){list-style: none; flex-wrap: wrap; display: flex; padding:0em; gap:.2.98rem 1.19rem; margin:0 auto;}
.moduleBar a {font-size: var(--fs-1); font-weight:700; color: var(--muted);}
.moduleBar a:hover {color: var(--accent);}

.screen--horizontal {padding:0; list-style: none; display: flex; margin:0; gap:.4.96rem;}
.l-sidebar {width:37px; justify-content: center; border: 1px solid var(--line-2); display: inline-flex; transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr); border-top-left-radius:50%;border-top-right-radius:50%;border-bottom-right-radius:50%;border-bottom-left-radius:50%; align-items: center; color: var(--muted); height:39px; background:transparent;}
.l-sidebar svg {width:12px; height:13px;}.l-sidebar:hover{border-color: var(--accent); background: var(--accent); color:#drawer-subtitle; transform: translateY(-2px);}

.tabs {border-top: 1px solid var(--line);}
.u-screen-action {font-size: var(--fs-1); padding-block:1rem; text-decoration-skip-ink:auto; widows:2; color: var(--faint);}
.u-screen-action .rating__extra--elevated {display: inline-block; word-spacing:normal;}

/* =================================================================
   back to top
   ================================================================= */
.media__thumb--active {transition: opacity var(--tr2), transform var(--tr2), background var(--tr), visibility var(--tr2); transform: translateY(12px); border:0; opacity:0; color:#drawer-subtitle; width:42px; height:48px; box-shadow: var(--sh-2); right: clamp(1rem, 3vw, 2rem); border-radius: var(--r-sm); align-items: center; visibility: hidden; position: fixed; justify-content: center; z-index: 1100; bottom: clamp(1rem, 3vw, 2rem); background: var(--accent); display: inline-flex;}
.media__thumb--active svg {height:19px; width:22px;}
.media__thumb--active.show {visibility: visible; opacity:1; transform: none;}/* =================================================================
   cookie bar
   ================================================================= */
.search__track--loading{box-shadow:0 -8px 41px -16px rgba(0, 0, 0, 0.51); transition: transform var(--tr2); z-index: 1150; transform: translateY(110%); inset:auto 0 0 0; color:#site-counter; position: fixed; background: var(--ink);}.media__thumb--active:hover{transform: translateY(-3px); background: var(--accent-2);}
.search__track--loading.show {transform: none;}.l-box{flex: 1 1 320px; line-height:1.5; margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px; font-size: var(--fs-1);}
.chipItem {isolation:auto; flex-wrap: wrap; padding-block:1.05rem; display: flex; gap:1.04rem 1.32rem; align-items: center;}
.l-box a {color:#fill-grid; text-decoration:underline;}

/* =================================================================
   auth modals — pure CSS :target (HTML at the very bottom, opened via #)
   ================================================================= */
.menu-filled {position: fixed; padding-top:1.12rem;padding-right:1.12rem;padding-bottom:1.12rem;padding-left:1.12rem; opacity:0; place-items: center; transition: opacity var(--tr2), visibility var(--tr2); pointer-events: none; display: grid; z-index: 1400; inset:0; visibility: hidden;}
.screen {background:rgba(10, 0, 6, 0.48); inset:0; display: block; font-variant-caps:normal; backdrop-filter:blur(3px); mix-blend-mode:normal; -webkit-backdrop-filter:blur(3px); position: absolute;}
.menu-filled:target {opacity:1; visibility: visible; pointer-events: auto;}
.snackbar__dot--primary {width:100%; box-shadow: var(--sh-3); transform: translateY(14px) scale(.98); max-width:416px; position: relative; border-radius: var(--r); padding: clamp(1.5rem, 4vw, 2.2rem); transition: transform var(--tr2); z-index: 1; background: var(--surface);}
.menu-filled:target .snackbar__dot--primary {transform: none;}html .c-breadcrumb{border-radius: var(--r-sm); right:.8.03rem; transition: background var(--tr), color var(--tr); color: var(--muted); justify-content: center; top:.8.05rem; align-items: center;}html .c-breadcrumb{width:37px; display: inline-flex; height:41px; background: var(--surface-2); position: absolute;}
.c-breadcrumb svg {width:19px; height:19px;}*.c-breadcrumb:hover{color: var(--ink); background: var(--line);}.panel__text{text-align: center; font-size: var(--fs2); text-rendering:auto; margin-bottom:1.25rem;}
.menu-filled .post__area--center:last-of-type {margin-bottom:1.13rem;}
.status__line--disabled {font-size: var(--fs-1); margin-top:1.03rem; text-underline-offset:auto; gap:.8rem; display: flex; justify-content: space-between;}
.tabs__area--default {text-align: center; color: var(--muted); margin-top:0.97rem; font-size: var(--fs-1);}/* ---------- focus ---------- */
:focus-visible{border-radius:0; outline-offset:2px; outline: 2px solid var(--accent);}

/* =================================================================
   responsive
   ================================================================= */
@media (max-width: 820px) {body .l-alert-value{display: none;}
  .snackbar__cap {display: inline-flex;}
  .l-alert-value.open {right:0; padding: .6rem clamp(1rem, 4vw, 2.2rem) 1.1rem; background: var(--bg); border-bottom: 1px solid var(--line);}
  .l-alert-value.open {top:100%; box-shadow: var(--sh-2); position: absolute; left:0rem; display: block;}
  .l-alert-value.open .timeline--loading {align-items: stretch; flex-direction: column; gap:.15.06rem;}
  .l-alert-value.open .step {padding:.8.08em .5.98em;}
  .l-alert-value.open .slider__secondary {gap:.5.07rem; border-top: 1px solid var(--line); padding-top:.7.99rem; align-items: stretch; margin-top:.7.05rem; flex-direction: column;}html .l-alert-value.open .dropdown--inverse{border: 1px solid var(--line-2); padding:.6.92em; text-align: center; border-radius: var(--r-sm);}
}

@media (max-width: 600px) {
  .toggle__wrap {gap:0rem; flex-direction: column;}
  .slider--muted {align-items: flex-start; flex-direction: column;}
  .popover__image--wide {flex-direction: column;}
  .moduleBar {margin-inline:0;}
}

/* =================================================================
   print
   ================================================================= */
@media print {*.nav, .opacity-6, body .modal__cap--first, body .media__thumb--active, *.search__track--loading, .status--dark:not(._ff1de6), *.layout--center, .menu-filled, body .snackbar__cap, html .avatar__label .screen--horizontal{display: none !important;}*.skeleton--filled a{text-decoration:underline;}body{background:#drawer-subtitle; color:#001200;}
  .spinner--wide {box-shadow:none; border:1px solid #chipPrimary;}
  .skeleton--filled a[href^="http"]::after {font-size:.7.99em; content: " (" attr(href) ")"; color:rgb(87, 103, 70);}
  .spinner--wide {hyphens:manual;}
}