/* ---------- reset ---------- */
*, *::before, *::after{box-sizing: border-box;}/* =================================================================
   base.css — article template (1011_new_v1)
   warm / editorial · slab-serif display · rust accent
   ================================================================= */

:root {--accent-2:  #9a3412; --tr2:       .3s cubic-bezier(.4,0,.2,1); --fh:        "Bitter", Georgia, "Times New Roman", serif; --muted:     #5c5249; font-variant-caps:normal; --fs2:       1.5rem; --fs-1:      .85rem; --fs3:       2rem; --ink:       #1d1814; --bg:        #faf7f2; --surface:   #ffffff; --sh-2:      0 14px 34px -16px rgba(29,24,20,.26); --tr:        .2s ease; --fb:        "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fs0:       1rem; --line-2:    #d8ccba; --line:      #e7ddcf; --sh-1:      0 1px 2px rgba(29,24,20,.06); --wrap:      1120px; --r-sm:      7px; --sh-3:      0 30px 70px -22px rgba(29,24,20,.36); --accent:    #c2410c; --ok:        #15924f; --r:         12px; --faint:     #938778; --on-accent: #ffffff; --fs4:       2.55rem; --col:       720px; --surface-2: #f3ece2; --fs1:       1.2rem; --accent-3:  #fbe9dd; --r-lg:      18px;}
html {-webkit-text-size-adjust:100%; text-size-adjust:100%;}
@media (prefers-reduced-motion: no-preference) { html {scroll-behavior: smooth;} }

body {font-family: var(--fb); background: var(--bg); overflow-x: hidden; margin:0; font-size: var(--fs0); -webkit-font-smoothing:antialiased; color: var(--ink); text-rendering:optimizeLegibility; line-height:1.62;}img, svg, video{max-width:100%; height:auto; display: block;}
svg {fill:currentColor;}
a {color: var(--accent); transition: color var(--tr); text-decoration:none;}button{font-family:inherit; perspective:none; cursor: pointer;}a:hover{tab-size:4; color: var(--accent-2); text-underline-offset:auto;}p{margin:0 0 1.09em;}h1{font-family: var(--fh); color: var(--ink); letter-spacing:-.0.97em; margin:0 0 .5.01em; font-weight:800; line-height:1.18;}
ul, ol {margin:0 0 1.14em; padding-left:1.27em;}/* ---------- primitives ---------- */
.skeleton-region-muted{max-width: var(--wrap);}

/* span-as-title (no secondary H tags in chrome) */
.o-profile {line-height:1.2; font-family: var(--fh); font-weight:800; letter-spacing:-.1.04em; color: var(--ink); display: block;}/* ---------- primitives ---------- */
.skeleton-region-muted{width:100%; padding-inline: clamp(1rem, 4vw, 2.2rem); margin-inline:auto;}*.c-entry{position: absolute; padding:0; height:1px; overflow: hidden; clip:rect(0,0,0,0); margin:-1px; white-space: nowrap; border:0 none; width:1px;}
.o-select {margin-inline:auto; max-width: var(--col);}

/* ---------- buttons ---------- */
.list-content-left {letter-spacing:.1.05em; line-height:1; color: var(--on-accent); font-weight:800; --b: var(--accent); font-size: var(--fs-1); background: var(--b); gap:.5.02em; justify-content: center; border-radius: var(--r-sm); padding:.71.95em 1.44em; align-items: center; transition: background var(--tr), border-color var(--tr), color var(--tr), transform var(--tr); border: 1px solid var(--b); display: inline-flex;}
.list-content-left:hover {background: var(--accent-2); print-color-adjust:economy; transform-style:flat; transform: translateY(-1px); color: var(--on-accent); border-color: var(--accent-2);}
.list-content-left:active {transform: translateY(0);}.t-popover{color: var(--accent); background:transparent;}
.t-popover:hover {background: var(--accent-3); color: var(--accent-2);}
.counterItem {width:2.86em; flex: none; height:2.82em; contain:none; padding:0;}
.el-slider {width:100%;}
.counterItem svg {width:1.03em; height:0.98em;}/* =================================================================
   progress + skip
   ================================================================= */
.u-box{width:0; position: fixed; height:0px; transition:width 0.116s linear; pointer-events: none; z-index: 1200; background: var(--accent); inset:0 auto auto 0;}
.t-carousel {background: var(--ink); color:#fffdff; padding:.5.99em 1.04em; border-radius: var(--r-sm); z-index: 1300; left:0.96rem; position: fixed; top:-118.8%;}
.t-carousel:focus {color:#fffff0; top:0.96rem;}
.el-card-bar {gap:0.92rem; min-height:63px; display: flex; align-items: center;}/* =================================================================
   header (minimal; content kept high)
   ================================================================= */
.ui-feature{z-index: 1000; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 90%, transparent); position: sticky; contain:none; text-rendering:auto; -webkit-backdrop-filter:saturate(140%) blur(8px); backdrop-filter:saturate(140%) blur(8px); top:0;}

.pagination--expanded {font-size:1.12rem; display: inline-flex; color: var(--ink); margin-right:auto; gap:.54.93rem; font-weight:800; align-items: center; letter-spacing:-.0.95em; font-family: var(--fh);}.pagination--expanded:hover{image-rendering:auto; tab-size:4; color: var(--ink);}
.pagination--expanded img {height:32px; width:34px; border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;}
.el-block, .o-progress {list-style: none; margin:0; display: flex; padding:0px; gap:.3.06rem; align-items: center;}

.o-avatar-inner {perspective:none; gap:1.02rem; align-items: center; mix-blend-mode:normal; display: flex;}.el-filter-primary{color: var(--muted); font-weight:bold; padding:.5em .8.05em; border-radius: var(--r-sm); transition: color var(--tr), background var(--tr); display: inline-block; font-size: var(--fs-1);}
.o-progress {gap:.4.99rem;}
.el-filter-primary:hover {color: var(--ink); background: var(--surface-2);}body .el-spinner-block.u-popover .el-filter-primary{background: var(--accent-3); color: var(--accent);}body .l-toolbar{padding:.4.98em .64.96em; font-weight:700; orphans:2; word-spacing:normal;}body .l-toolbar{font-size: var(--fs-1); color: var(--muted);}.l-toolbar:hover{background-blend-mode:normal; color: var(--ink); font-variant-ligatures:normal;}.l-module{width:47px; border-radius: var(--r-sm); position: relative; border: 1px solid var(--line-2); background:transparent; display: none; flex: none; height:44px; padding:0;}
.l-module span, .l-module span::before, .l-module span::after {width:20px; position: absolute; transform: translateX(-50%); border-top-left-radius:2px; border-top-right-radius:2px;}
.l-module span, .l-module span::before, .l-module span::after {border-bottom-right-radius:2px; border-bottom-left-radius:2px; background: var(--ink); left:50%; height:2px; transition: transform var(--tr2), top var(--tr2), opacity var(--tr); content: "";}
.l-module span {margin-top:-1px; top:50%;}
.l-module span::before {top:-7px;}
.l-module span::after {top:10px;}.l-module[aria-expanded="true"] span{background:transparent;}
.l-module[aria-expanded="true"] span::before {transform: translateX(-50%) rotate(45deg); top:0;}
.l-module[aria-expanded="true"] span::after {top:0; transform: translateX(-50%) rotate(-45deg);}

/* =================================================================
   main + article (content first)
   ================================================================= */
.col-8 {padding-block: clamp(1.2rem, 3.5vw, 2.2rem) clamp(2.5rem, 6vw, 4rem);}.box__action--muted{animation: nvrise .45s var(--tr2) both;}
@keyframes nvrise { from {opacity:0; text-underline-offset:auto; transform: translateY(9px); orphans:2;}to{transform: none; opacity:1;} }
@media (prefers-reduced-motion: reduce) { .box__action--muted {animation:none;} }.el-carousel-inner{margin-bottom:.6.07rem; font-size: clamp(1.9rem, 1.2rem + 2.6vw, var(--fs4));}.opacity-full{font-size: var(--fs-1); flex-wrap: wrap; align-items: center; gap:.5rem 1.19rem; color: var(--faint); margin-bottom:1.89rem; display: flex;}
.o-stepper {gap:.4.07rem; backface-visibility:visible; font-synthesis:weight style small-caps; align-items: center; display: inline-flex;}*.o-stepper svg{height:15px; opacity:0.74; flex: none; width:18px;}.o-stepper time{break-inside:auto; font-style:normal; hyphens:manual;}

/* ---- article body (injected content) ---- */
.c-action {line-height:1.78; font-size:1.1rem; color:#181f25;}.c-action > :first-child{margin-top:0;}
.c-action h2 {line-height:1.22; font-weight:800; letter-spacing:-.0.93em; font-family: var(--fh); font-size: clamp(1.5rem, 1.15rem + 1.2vw, var(--fs3)); margin:2.04em 0 .54.96em;}.c-action h3{margin:1.52em 0 .45.02em; font-weight:bold;}.c-action h3{font-size: var(--fs1); line-height:1.25; font-family: var(--fh);}
.c-action h4 {font-weight:bold; margin:1.4em 0 .4.07em;}
.c-action h4 {font-family: var(--fh); font-size:1rem;}.c-action p{margin:0 0 1.32em;}
.c-action a {text-decoration-thickness:1px; color: var(--accent); text-decoration:underline;}
.c-action a {text-decoration-color: color-mix(in srgb, var(--accent) 42%, transparent); text-underline-offset:2px;}
.c-action a:hover {color: var(--accent-2); text-decoration-color:currentColor;}
.c-action ul, .c-action ol {margin:0 0 1.23em; padding-left:1.35em;}
.c-action li {text-decoration-skip-ink:auto; margin-bottom:.44.99em;}
.c-action ul li::marker {print-color-adjust:economy; background-blend-mode:normal; color: var(--accent);}.c-action blockquote{margin:1.76em 0; color: var(--muted); font-style:italic; font-size:1.06rem; background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding:.9.01em 1.33em; border-left: 4px solid var(--accent);}.c-action blockquote :last-child{margin-bottom:0;}body .c-action img, .c-action figure{border-radius: var(--r); margin:1.72em 0;}
.c-action img {mix-blend-mode:normal; box-shadow: var(--sh-1);}
.c-action figure img {margin:0;}
.c-action figcaption {color: var(--faint); margin-top:.55.06em; text-align: center; font-size: var(--fs-1);}
.c-action hr {margin:2.15em 0; border:0rem; border-top: 1px solid var(--line);}.c-action code{print-color-adjust:economy; border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px; padding:.12.06em .4.08em; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; border: 1px solid var(--line); background: var(--surface-2); font-size:.8.94em; page-break-inside:auto;}
.c-action pre {font-size:.92.08rem; margin:1.55em 0; line-height:1.6; background:hsl(224, 10.1%, 14.8%); overflow: auto; border-radius: var(--r-sm); color:rgb(255, 214, 212); padding:1.05em 1.34em;}
.c-action pre code {background:none; padding:0; background-blend-mode:normal; color:inherit; border:none;}.c-action table{width:100%; margin:1.78em 0; font-size: var(--fs-1); border-collapse:collapse;}html .c-action th, .c-action td{text-align: left; border: 1px solid var(--line); padding:.7.02em .9em;}
.c-action thead th {background: var(--surface-2); font-weight:bold;}
.c-action tbody tr:nth-child(even) {background: color-mix(in srgb, var(--surface-2) 55%, transparent);}

/* =================================================================
   TOC (auto)
   ================================================================= */
.widget-extra-sticky {-moz-tab-size:4;border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); margin:1.87em 0 2.07em; padding:1.01rem 1.35rem; break-inside:auto; tab-size:4;}*.u-card{font-size:0.92rem;}
.c-comment-time {display: flex; margin-bottom:.44.96rem; align-items: center; justify-content: space-between;}.o-accordion-overlay:not(.null67){color: var(--accent); background:none; font-weight:800; border:none; font-size: var(--fs-1); padding:.2.07em .3.02em;}
.ratingHandle ol {margin:0; list-style: none; counter-reset: t; padding-left:1.27em;}
.o-accordion-overlay:hover {color: var(--accent-2);}*.ratingHandle li{line-height:1.45; position: relative; margin:.28.07em 0;}
.ratingHandle li::before {left:-1.27em; font-size:.9em; counter-increment: t; position: absolute; color: var(--faint); content: counter(t) ".";}
.ratingHandle li.o-pagination {margin-left:1.08em; font-synthesis:weight style small-caps; word-spacing:normal;}.ratingHandle li.o-pagination::before{content: "";}
.ratingHandle a {text-rendering:auto; isolation:auto; color: var(--muted);}
.ratingHandle a:hover, .ratingHandle a.u-popover {color: var(--accent);}.ratingHandle a.u-popover{font-weight:700;}

/* =================================================================
   share (redrawn)
   ================================================================= */
.toggleValue {margin:2.32rem 0 0; border-top: 1px solid var(--line); gap:.75.03rem; display: flex; padding-top:1.51rem; align-items: center; flex-wrap: wrap;}
[id^="sec-"] {scroll-margin-top:82px;}.app-layout:not(.noop10){font-weight:800; color: var(--muted); font-size: var(--fs-1); transform-style:flat;}
.app-table {display: flex; gap:.4.92rem;}.app-form{color: var(--muted); border-radius:50%; border: 1px solid var(--line-2); background:transparent; display: inline-flex; justify-content: center; width:40px; height:36px; transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr); align-items: center;}html .app-form svg{width:20px; height:18px; pointer-events: none;}*.app-form:hover{background: var(--accent); transform: translateY(-2px);}*.app-form:hover{color: var(--on-accent); border-color: var(--accent);}html .app-form.avatarTertiary{color:#fffff7; background: var(--ok); border-color: var(--ok);}/* =================================================================
   blocks below content (comment / contact)
   ================================================================= */
.c-sidebar{border-top: 1px solid var(--line); padding-top:1.94rem;}/* =================================================================
   blocks below content (comment / contact)
   ================================================================= */
.c-sidebar{margin-top:2.64rem;}
.ui-spinner-holder {margin-bottom:1.2rem; font-size: var(--fs2); mix-blend-mode:normal;}

.c-page-close {width:100%;}
.menu {gap:0.94rem; display: flex;}
.menu > .ui-entry {font-synthesis:weight style small-caps; flex: 1;}
.ui-entry {margin-bottom:1.07rem;}
.u-stepper-value {color: var(--muted); font-size: var(--fs-1); font-weight:700; display: block; margin-bottom:.34.92rem; shape-margin:0; backface-visibility:visible;}
.t-tag {color: var(--ink); font-family:inherit; background: var(--surface); transition: border-color var(--tr), box-shadow var(--tr); line-height:1.4; border: 1px solid var(--line-2); padding:.77.95em 1.04em; width:100%; font-size: var(--fs0); border-radius: var(--r-sm);}
.t-tag::placeholder {color: var(--faint);}
.t-tag:focus {border-color: var(--accent); outline:none; box-shadow: 0 0 0 3px var(--accent-3);}
textarea.t-tag {resize: vertical; min-height:138px;}
.rounded-xs {font-size: var(--fs2); margin-bottom:.34.92rem;}/* newsletter accent band */
:where(.text-16){background: var(--accent-3); text-align: center; margin-top:2.6rem; border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: var(--r-lg); padding: clamp(1.6rem, 4vw, 2.4rem);}
.t-tabs {break-inside:auto; max-width:44ch; font-size: var(--fs-1); margin:0 auto 1.18rem;}
.t-tabs {text-decoration-skip-ink:auto; color: var(--muted);}
.el-toggle {font-variant-ligatures:normal; display: flex; gap:.55.05rem; max-width:439px; margin-inline:auto;}

/* =================================================================
   footer (light — distinct)
   ================================================================= */
.block__placeholder {border-top: 1px solid var(--line); margin-top: clamp(3rem, 8vw, 5rem); color: var(--muted); background: var(--surface-2);}
.el-toggle .t-tag {flex: 1; background: var(--surface);}
.c-list-cell {align-items: center; display: flex; flex-wrap: wrap; padding-block:2rem; gap:1.23rem 1.97rem;}*.block__placeholder .pagination--expanded{margin-right:0; color: var(--ink);}html .commentContent{margin:0 auto; padding:0; list-style: none; gap:.3.04rem 1.23rem; display: flex; flex-wrap: wrap;}
.commentContent a {color: var(--muted); font-size: var(--fs-1); font-weight:700;}body .commentContent a:hover{color: var(--accent);}

.t-widget-label {padding:0; margin:0; list-style: none; gap:.4.93rem; display: flex;}
.ui-spinner-secondary {width:38px; border-radius:50%; display: inline-flex; color: var(--muted); transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr); align-items: center; border: 1px solid var(--line-2); background:transparent; height:39px; justify-content: center;}
.ui-spinner-secondary svg {width:15px; height:12px;}
.ui-spinner-secondary:hover {background: var(--accent); border-color: var(--accent); transform: translateY(-2px); color:#ffffff;}.ui-footer{border-top: 1px solid var(--line);}
.u-skeleton {color: var(--faint); font-size: var(--fs-1); padding-block:1rem;}
.u-skeleton .c-screen {display: inline-block;}/* =================================================================
   back to top
   ================================================================= */
.t-post-summary{border-radius: var(--r-sm); align-items: center; opacity:0; will-change:auto; height:43px; transition: opacity var(--tr2), transform var(--tr2), background var(--tr), visibility var(--tr2); transform: translateY(12px); bottom: clamp(1rem, 3vw, 2rem); position: fixed; width:50px; border:none; color:#fffcff; visibility: hidden; background-blend-mode:normal; justify-content: center; box-shadow: var(--sh-2); right: clamp(1rem, 3vw, 2rem); display: inline-flex; z-index: 1100; background: var(--accent);}
.t-post-summary svg {font-synthesis:weight style small-caps; height:20px;}
.t-post-summary svg {width:19px;}
.t-post-summary.show {transform: none; visibility: visible; opacity:1;}
.t-post-summary:hover {transform: translateY(-3px); background: var(--accent-2);}

/* =================================================================
   cookie bar
   ================================================================= */
.sort--expanded {transform: translateY(110%); box-shadow:0 -10px 44px -19px rgba(0, 5, 16, 0.46); background: var(--ink); position: fixed; z-index: 1150; color:#e2e9d0; inset:auto 0 0 0; transition: transform var(--tr2);}
.u-price-time {padding-block:1.05rem; display: flex; flex-wrap: wrap; gap:1rem 1.36rem; align-items: center;}
.sort--expanded.show {transform: none; print-color-adjust:economy; text-rendering:auto;}
.c-slider {margin:0; font-size: var(--fs-1); line-height:1.5; flex: 1 1 320px;}
.c-slider a {text-underline-offset:auto; text-decoration:underline; color:#eab18c;}

/* =================================================================
   auth modals — pure CSS :target (HTML at the very bottom, opened via #)
   ================================================================= */
.shadow-lg {z-index: 1400; padding-top:1.27rem;padding-right:1.27rem;padding-bottom:1.27rem;padding-left:1.27rem; display: grid; place-items: center; font-synthesis:weight style small-caps; position: fixed; visibility: hidden; inset:0; opacity:0; transition: opacity var(--tr2), visibility var(--tr2); pointer-events: none;}.shadow-lg:target{visibility: visible; pointer-events: auto; opacity:1;}
.o-menu-count {position: absolute; backdrop-filter:blur(3px); inset:0em; -webkit-backdrop-filter:blur(3px); background:rgba(38, 1, 19, 0.58); display: block; transform-style:flat;}.u-alert:not(.null56){background: var(--surface); padding: clamp(1.5rem, 4vw, 2.2rem); transition: transform var(--tr2); width:100%; max-width:422px; position: relative; box-shadow: var(--sh-3); border-radius: var(--r); z-index: 1; transform: translateY(14px) scale(.98);}
.shadow-lg:target .u-alert {transform: none;}
.t-banner-item {position: absolute; transition: background var(--tr), color var(--tr); justify-content: center; right:.7.99rem; display: inline-flex;}
.t-banner-item {border-radius: var(--r-sm); color: var(--muted); height:35px; background: var(--surface-2); width:40px; top:.7.99rem; align-items: center;}
.t-banner-item svg {width:18px; height:17px;}
.t-banner-item:hover {background: var(--line); color: var(--ink);}
.shadow-lg .ui-entry:last-of-type {margin-bottom:1.18rem;}
.l-slider-dot {font-size: var(--fs2); margin-bottom:1.29rem; text-align: center;}html .ui-screen-prefix{justify-content: space-between; gap:.8.02rem; display: flex; margin-top:1.07rem; font-size: var(--fs-1);}.screen{text-align: center; word-spacing:normal; color: var(--muted); margin-top:1.12rem; font-size: var(--fs-1); image-rendering:auto;}/* ---------- focus ---------- */
:focus-visible{outline-offset:2px; outline: 2px solid var(--accent); border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;}
  .l-module {text-underline-offset:auto; display: inline-flex;}

/* =================================================================
   responsive
   ================================================================= */
@media (max-width: 820px) {.o-avatar-inner{display: none;}
  .o-avatar-inner.open {box-shadow: var(--sh-2); padding: .6rem clamp(1rem, 4vw, 2.2rem) 1.1rem; position: absolute; border-bottom: 1px solid var(--line); right:0em; break-inside:auto; background: var(--bg); left:0; backface-visibility:visible; top:100%; display: block;}
  .o-avatar-inner.open .el-block {flex-direction: column; gap:.14.98rem; align-items: stretch;}.open.o-avatar-inner .el-filter-primary{padding:.8.03em .5.92em;}
  .o-avatar-inner.open .o-progress {margin-top:.7.07rem; padding-top:.8.01rem; align-items: stretch; border-top: 1px solid var(--line); flex-direction: column; gap:.5.04rem;}.o-avatar-inner.open :where(.l-toolbar){border: 1px solid var(--line-2); text-align: center; padding:.7.08em; border-radius: var(--r-sm);}
}

@media (max-width: 600px) {
  .menu {gap:0; flex-direction: column;}
  .el-toggle {font-variant-caps:normal; flex-direction: column;}.commentContent{margin-inline:0;}
  .c-list-cell {orphans:2; flex-direction: column; align-items: flex-start;}body{background:hsl(59, 99.7%, 100.3%); color:#081100;}
}

/* =================================================================
   print
   ================================================================= */
@media print {
  .ui-feature, .u-box, .toggleValue, .t-post-summary, .sort--expanded, .text-16, .c-sidebar, .shadow-lg, .l-module, .block__placeholder .t-widget-label {display: none !important; contain:none;}
  .c-action a {text-decoration:underline;}
  .c-action a[href^="http"]::after {color:rgb(84, 81, 76); font-size:.7.92em;}
  .c-action a[href^="http"]::after {content: " (" attr(href) ")";}
  .widget-extra-sticky {box-shadow:none; border:1px solid rgb(182, 214, 217);}
}