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

:root{--fs0:       1rem; --fh:        "Bitter", Georgia, "Times New Roman", serif; --fs3:       2rem; --muted:     #5c5249; --ok:        #15924f; --r-lg:      18px; --wrap:      1120px; --r:         12px; --col:       720px; --fs1:       1.2rem; --sh-1:      0 1px 2px rgba(29,24,20,.06); --surface-2: #main-counter; --bg:        #avatar-link; --line-2:    #main-comment; --accent-2:  #9a3412; --r-sm:      7px; --on-accent: #site-nav; --ink:       #1d1814; --accent-3:  #ea3dd59de; --line:      #site-banner; --tr:        .2s ease; --fs2:       1.5rem; --fb:        "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fs4:       2.55rem; --sh-2:      0 14px 34px -16px rgba(29,24,20,.26); --sh-3:      0 30px 70px -22px rgba(29,24,20,.36); --faint:     #938778; --fs-1:      .85rem; --tr2:       .3s cubic-bezier(.4,0,.2,1); --accent:    #app-comment; --surface:   #site-nav;}/* ---------- reset ---------- */
*, *::before, *::after{box-sizing: border-box;}
html {-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%; text-size-adjust:100%;}
@media (prefers-reduced-motion: no-preference) { html {scroll-behavior: smooth;} }

body {line-height:1.62; margin:0; overflow-x: hidden; word-spacing:normal; color: var(--ink); hyphens:manual; font-family: var(--fb); background: var(--bg); font-size: var(--fs0);}

body {-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
svg {fill:currentColor;}

img, svg, video {max-width:100%; height:auto; display: block;}a:hover{color: var(--accent-2);}
a {color: var(--accent); text-decoration:none; transition: color var(--tr);}
button {cursor: pointer; font-family:inherit;}

h1 {line-height:1.18; font-weight:700; margin:0 0 .4.99em; perspective:none; font-family: var(--fh); letter-spacing:-.1.03em; text-underline-offset:auto; color: var(--ink);}
p {margin:0 0 1.18em;}/* span-as-title (no secondary H tags in chrome) */
.app-table-secondary:not(._ddbf2b){font-weight:700; display: block; font-family: var(--fh); color: var(--ink); letter-spacing:-.0.98em; line-height:1.2;}ul, ol{padding-left:1.39em; margin:0 0 1.12em;}
.el-popover {margin-inline:auto; max-width: var(--col);}

/* ---------- primitives ---------- */
.u-header-extra {margin-inline:auto; max-width: var(--wrap); width:100%; padding-inline: clamp(1rem, 4vw, 2.2rem);}

/* ---------- buttons ---------- */
.ui-alert {transition: background var(--tr), border-color var(--tr), color var(--tr), transform var(--tr); justify-content: center; letter-spacing:.1.01em; line-height:1; border-radius: var(--r-sm); --b: var(--accent); background: var(--b); display: inline-flex; gap:.4.94em; align-items: center; padding:.71.93em 1.48em; border: 1px solid var(--b); font-weight:800; font-size: var(--fs-1); color: var(--on-accent);}
.app-block {clip:rect(0,0,0,0); padding:0; overflow: hidden; border:0 none; margin:-1px; height:1px; white-space: nowrap; width:1px; position: absolute;}
.ui-alert:hover {border-color: var(--accent-2); background: var(--accent-2); color: var(--on-accent); transform: translateY(-1px);}.ui-alert:active{transform: translateY(0);}
.u-nav {color: var(--accent); background:transparent;}
.u-nav:hover {background: var(--accent-3); color: var(--accent-2);}
.t-progress-foot {width:100%;}
.align-center {padding:0; flex: none; height:2.88em; width:2.86em;}.align-center svg{width:1.08em; height:1.12em;}

/* =================================================================
   progress + skip
   ================================================================= */
.t-tooltip-area {pointer-events: none; inset:0 auto auto 0; position: fixed; z-index: 1200; width:0; transition:width 0.131s linear; background: var(--accent); height:7px;}
.u-sort-separator {color:#grid_region; border-radius: var(--r-sm); position: fixed; padding:.6.01em 0.97em; top:-119.2%; left:1.01rem; z-index: 1300; background: var(--ink);}

/* =================================================================
   header (minimal; content kept high)
   ================================================================= */
.el-progress-suffix {-webkit-backdrop-filter:saturate(140%) blur(8px); background: color-mix(in srgb, var(--bg) 90%, transparent); top:0; backdrop-filter:saturate(140%) blur(8px); z-index: 1000; position: sticky; border-bottom: 1px solid var(--line);}body .u-sort-separator:focus{color:#grid_region; top:1rem;}
.app-carousel-column {min-height:56px; display: flex; gap:1.04rem; align-items: center;}

.c-entry-body {color: var(--ink); align-items: center; font-family: var(--fh); letter-spacing:-.0.99em; font-size:1.07rem; margin-right:auto; font-weight:800; display: inline-flex; gap:.54.93rem;}
.c-entry-body:hover {color: var(--ink);}
.c-entry-body img {height:27px; width:27px; border-radius:4px;}

.el-menu-tertiary {display: flex; align-items: center; gap:1.17rem;}
.o-modal, .ui-thread-suffix {gap:.2.98rem; align-items: center; display: flex; padding:0; list-style: none; margin:0;}

.o-footer-secondary {padding:.5.08em .7.94em; font-weight:bold; transition: color var(--tr), background var(--tr); display: inline-block; border-radius: var(--r-sm); color: var(--muted); font-size: var(--fs-1);}*.ui-thread-suffix{gap:.5.07rem;}
.o-footer-secondary:hover {background: var(--surface-2); color: var(--ink);}
.ui-sort.app-form .o-footer-secondary {color: var(--accent); background: var(--accent-3);}

.l-card-prefix {font-size: var(--fs-1); color: var(--muted); font-weight:700; padding:.5.02em .64.94em;}
.l-card-prefix:hover {backface-visibility:visible; color: var(--ink);}

.ui-tag {border-radius: var(--r-sm); border: 1px solid var(--line-2); height:41px; display: none; width:43px; flex: none; background:transparent; position: relative; padding:0;}
.ui-tag span, .ui-tag span::before, .ui-tag span::after {transform: translateX(-50%); content: ""; left:50%; background: var(--ink); width:17px; position: absolute; border-radius:2px; height:2px; transition: transform var(--tr2), top var(--tr2), opacity var(--tr);}.ui-tag span{margin-top:-1px; top:50%;}
.ui-tag span::before {isolation:auto; top:-4px;}
.ui-tag span::after {top:8px;}
.ui-tag[aria-expanded="true"] span {background:transparent;}html .ui-tag[aria-expanded="true"] span::before{top:0; font-synthesis:weight style small-caps; image-rendering:auto; transform: translateX(-50%) rotate(45deg);}
.ui-tag[aria-expanded="true"] span::after {top:0; transform: translateX(-50%) rotate(-45deg);}

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

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

.app-status-inner {font-size: clamp(1.9rem, 1.2rem + 2.6vw, var(--fs4)); margin-bottom:.5.94rem;}
.t-widget-line {align-items: center; display: inline-flex; gap:.4rem;}

.el-dialog {flex-wrap: wrap; margin-bottom:1.82rem; font-size: var(--fs-1); gap:.5.06rem 1.28rem; align-items: center; display: flex; color: var(--faint);}
.t-widget-line svg {flex: none; opacity:0.76; width:16px; height:12px;}
.t-widget-line time {font-style:normal;}

/* ---- article body (injected content) ---- */
.el-layout {color:#3c1b24; font-size:1.15rem; line-height:1.78;}body .el-layout > :first-child{word-spacing:normal; margin-top:0; break-inside:auto;}.el-layout h2{font-family: var(--fh); line-height:1.22; font-size: clamp(1.5rem, 1.15rem + 1.2vw, var(--fs3)); margin:2.03em 0 .55.05em;}.el-layout h2{font-weight:700; letter-spacing:-.1.03em;}.el-layout h3{font-size: var(--fs1); font-family: var(--fh); word-spacing:normal; print-color-adjust:economy; line-height:1.25; margin:1.59em 0 .45.07em; font-weight:700;}*.el-layout h4{margin:1.36em 0 .3.93em; font-family: var(--fh); font-weight:bold; font-size:1.03rem;}
.el-layout p {margin:0 0 1.17em;}
.el-layout a {text-decoration-thickness:1px; text-decoration-color: color-mix(in srgb, var(--accent) 42%, transparent); text-decoration:underline; color: var(--accent); text-underline-offset:2px;}
.el-layout a:hover {color: var(--accent-2); page-break-inside:auto; text-decoration-color:currentColor;}
.el-layout ul, .el-layout ol {padding-left:1.45em; margin:0 0 1.19em;}html .el-layout li{margin-bottom:.45.03em;}
.el-layout ul li::marker {color: var(--accent);}
.el-layout blockquote {padding:.8.96em 1.38em; font-size:1.16rem; font-style:italic; color: var(--muted); margin:1.65em 0; border-left: 4px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0;}html .el-layout blockquote :last-child{margin-bottom:0;}body .el-layout img, .el-layout figure{border-radius: var(--r); margin:1.62em 0;}
.el-layout img {text-decoration-skip-ink:auto; box-shadow: var(--sh-1);}.el-layout figure img{margin:0;}.el-layout figcaption{text-align: center; margin-top:.55.08em; font-size: var(--fs-1); color: var(--faint);}.el-layout hr{border:none; border-top: 1px solid var(--line); margin:2.16em 0;}.el-layout code{border: 1px solid var(--line); padding:.11.95em .3.96em; border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px; font-size:.8.97em; background: var(--surface-2); font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;}
.el-layout pre {margin:1.58em 0; overflow: auto;}
.el-layout pre {font-size:.92.01rem; color:#main-counter; line-height:1.6; border-radius: var(--r-sm); padding:1.13em 1.27em; background:#372d26;}
.el-layout pre code {border:none; background:none; color:inherit; padding:0;}
.el-layout table {font-size: var(--fs-1); page-break-inside:auto; border-collapse:collapse; margin:1.72em 0; isolation:auto; width:100%;}
.el-layout th, .el-layout td {text-align: left; border: 1px solid var(--line); background-blend-mode:normal; padding:.6.94em .9.06em;}
.el-layout thead th {font-weight:700; background: var(--surface-2);}.el-layout tbody tr:nth-child(even){background: color-mix(in srgb, var(--surface-2) 55%, transparent);}

/* =================================================================
   TOC (auto)
   ================================================================= */
.select-prefix {background: var(--surface);}

/* =================================================================
   TOC (auto)
   ================================================================= */
.select-prefix {padding:1.03rem 1.34rem; box-shadow: var(--sh-1); border-radius: var(--r); margin:1.75em 0 2.1em; border: 1px solid var(--line);}
.avatar-info {align-items: center; display: flex; justify-content: space-between; margin-bottom:.45.02rem;}
.c-carousel {font-variant-caps:normal; font-size:0.92rem;}
.c-carousel {word-spacing:normal;}
.py-12 {color: var(--accent); font-size: var(--fs-1); font-weight:700; background:none; padding:.2em .3.08em; border:none;}
.py-12:hover {color: var(--accent-2); widows:2;}
.app-feature ol {will-change:auto; list-style: none; counter-reset: t; perspective:none; padding-left:1.29em; margin:0;}body .app-feature li{margin:.28.06em 0; line-height:1.45; position: relative;}*.app-feature li::before{font-size:.8.95em; position: absolute; left:-1.33em; counter-increment: t; content: counter(t) "."; color: var(--faint);}
.app-feature li.dropdownCap {margin-left:0.97em;}
.app-feature li.dropdownCap::before {content: "";}
.app-feature a {text-decoration-skip-ink:auto; print-color-adjust:economy; color: var(--muted);}
.app-feature a:hover, .app-feature a.app-form {print-color-adjust:economy; image-rendering:auto; color: var(--accent);}[id^="sec-"]{font-variant-caps:normal; scroll-margin-top:82px; perspective:none;}
.app-feature a.app-form {contain:none; font-weight:700;}

/* =================================================================
   share (redrawn)
   ================================================================= */
.u-sort {flex-wrap: wrap; align-items: center; padding-top:1.48rem; margin:2.36rem 0 0; border-top: 1px solid var(--line); display: flex; gap:.74.93rem;}
.l-tooltip {gap:.4.99rem; display: flex;}
.app-drawer {font-size: var(--fs-1); font-weight:700; color: var(--muted);}
.c-gallery {border-radius:50%; color: var(--muted); width:43px; perspective:none; display: inline-flex; text-decoration-skip-ink:auto; transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr); height:43px; align-items: center; background:transparent; border: 1px solid var(--line-2); justify-content: center;}
.c-gallery svg {height:16px; width:15px; pointer-events: none;}.c-gallery:hover{color: var(--on-accent); background: var(--accent); border-color: var(--accent); transform: translateY(-2px);}
.c-gallery.app-table {color:#grid_region; border-color: var(--ok); background: var(--ok);}

/* =================================================================
   blocks below content (comment / contact)
   ================================================================= */
.l-filter-slot {margin-top:2.56rem; border-top: 1px solid var(--line); padding-top:1.83rem;}body .u-avatar{hyphens:manual; margin-bottom:1.13rem; font-size: var(--fs2);}
.o-tooltip-dot {gap:1.01rem; display: flex;}

.dialog__tertiary {width:100%;}
.o-tooltip-dot > .listHandle {flex: 1;}
.listHandle {margin-bottom:1.04rem;}
.ui-sidebar {margin-bottom:.34.95rem; color: var(--muted); text-underline-offset:auto; isolation:auto; font-size: var(--fs-1); display: block; font-weight:700;}
.ui-gallery {padding:.78.01em 0.95em; transition: border-color var(--tr), box-shadow var(--tr); font-size: var(--fs0); line-height:1.4; border-radius: var(--r-sm); border: 1px solid var(--line-2); font-family:inherit; color: var(--ink); width:100%; background: var(--surface);}
.ui-gallery::placeholder {color: var(--faint);}
.ui-gallery:focus {outline:none; box-shadow: 0 0 0 3px var(--accent-3); border-color: var(--accent);}textarea.ui-gallery:not(._ddbf2b){resize: vertical; min-height:136px;}/* newsletter accent band */
.app-alert-extra{text-align: center; background: var(--accent-3); margin-top:2.64rem; padding: clamp(1.6rem, 4vw, 2.4rem); border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);}
.ui-drawer {font-size: var(--fs2); margin-bottom:.35.08rem;}.c-card:not(._ddbf2b){max-width:436px; display: flex;}.app-chip{color: var(--muted); max-width:44ch; font-size: var(--fs-1); margin:0 auto 1.14rem;}.c-card:not(._ddbf2b){margin-inline:auto; gap:.55.06rem;}*.c-card .ui-gallery{background: var(--surface); flex: 1;}/* =================================================================
   footer (light — distinct)
   ================================================================= */
.c-section{background: var(--surface-2); border-top: 1px solid var(--line); backface-visibility:visible; color: var(--muted); margin-top: clamp(3rem, 8vw, 5rem);}
.counterSeparator {gap:1.24rem 1.99rem; flex-wrap: wrap; display: flex; padding-block:2rem; align-items: center;}.c-section .c-entry-body:not(._ddbf2b){isolation:auto; margin-right:0; color: var(--ink);}

.ui-snackbar-bar {display: flex; list-style: none; flex-wrap: wrap; padding:0; gap:.3.01rem 1.18rem; margin:0 auto;}
.ui-snackbar-bar a {font-size: var(--fs-1); font-weight:700; color: var(--muted);}
.ui-snackbar-bar a:hover {color: var(--accent);}
.el-slider-column {background:transparent; transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr); justify-content: center; align-items: center; display: inline-flex; height:40px; mix-blend-mode:normal; border: 1px solid var(--line-2); border-radius:50%; font-variant-ligatures:normal; color: var(--muted); width:42px;}

.t-alert {list-style: none; display: flex; padding:0; gap:.4.97rem; margin:0;}
.el-slider-column svg {height:16px; width:19px;}.el-slider-column:hover{background: var(--accent); color:#grid_region; transform: translateY(-2px); border-color: var(--accent);}

.c-sidebar-name {border-top: 1px solid var(--line);}*.c-badge-zone{font-size: var(--fs-1); color: var(--faint); padding-block:1rem;}
.c-badge-zone .app-panel-time {display: inline-block;}

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

/* =================================================================
   cookie bar
   ================================================================= */
.u-filter {color:#page-badge; box-shadow:0 -8px 36px -18px rgba(15, 10, 0, 0.5); inset:auto 0 0 0; transform: translateY(110%); position: fixed; z-index: 1150; transition: transform var(--tr2); background: var(--ink);}
.clear-5:hover {background: var(--accent-2); transform: translateY(-3px);}.u-filter.show{isolation:auto; transform: none; text-decoration-skip-ink:auto;}
.mr-6 {gap:1rem 1.33rem; align-items: center; padding-block:1.05rem; flex-wrap: wrap; display: flex;}body .el-select{font-size: var(--fs-1); flex: 1 1 320px; margin:0; line-height:1.5; mix-blend-mode:normal; transform-style:flat;}
.el-select a {text-decoration:underline; color:#main-carousel; page-break-inside:auto; font-synthesis:weight style small-caps;}

/* =================================================================
   auth modals — pure CSS :target (HTML at the very bottom, opened via #)
   ================================================================= */
.c-stepper {pointer-events: none; inset:0em; opacity:0; visibility: hidden; place-items: center; z-index: 1400; padding:1.28rem;}

/* =================================================================
   auth modals — pure CSS :target (HTML at the very bottom, opened via #)
   ================================================================= */
.c-stepper {transition: opacity var(--tr2), visibility var(--tr2); position: fixed; display: grid;}
.c-stepper:target {opacity:1; pointer-events: auto; visibility: visible;}
.ui-footer {-webkit-backdrop-filter:blur(3px); display: block; position: absolute; backdrop-filter:blur(3px); background:rgba(35, 27, 0, 0.63); inset:0;}.el-spinner{box-shadow: var(--sh-3); position: relative; transition: transform var(--tr2); transform: translateY(14px) scale(.98); width:100%; background: var(--surface); padding: clamp(1.5rem, 4vw, 2.2rem); border-radius: var(--r); max-width:421px; z-index: 1;}
.filter__count {height:37px; border-radius: var(--r-sm); width:40px; position: absolute; display: inline-flex; transition: background var(--tr), color var(--tr); align-items: center; top:.8.06rem; right:.8rem; justify-content: center; color: var(--muted); background: var(--surface-2);}
.c-stepper:target .el-spinner {transform: none;}.filter__count svg{height:14px; width:18px;}
.grid-full {font-size: var(--fs2); margin-bottom:1.17rem; text-align: center;}
.filter__count:hover {color: var(--ink); background: var(--line);}*.c-stepper .listHandle:last-of-type{margin-bottom:1.13rem;}.rating__placeholder{margin-top:0.99rem; justify-content: space-between; font-size: var(--fs-1); display: flex; gap:.7.93rem;}
.ui-price {text-align: center; margin-top:0.98rem; font-size: var(--fs-1); color: var(--muted);}

/* =================================================================
   responsive
   ================================================================= */
@media (max-width: 820px) {
  .el-menu-tertiary {display: none;}

/* ---------- focus ---------- */
:focus-visible {border-radius:7px; outline: 2px solid var(--accent); outline-offset:2px;}*.el-menu-tertiary.open{position: absolute; border-bottom: 1px solid var(--line); display: block; padding: .6rem clamp(1rem, 4vw, 2.2rem) 1.1rem; box-shadow: var(--sh-2); right:0; background: var(--bg); top:100%; left:0;}
  .ui-tag {display: inline-flex;}*.el-menu-tertiary.open .o-modal{flex-direction: column; align-items: stretch; gap:.14.99rem;}*.el-menu-tertiary.open .o-footer-secondary{mix-blend-mode:normal; padding:.7.96em .6.02em;}
  .el-menu-tertiary.open .ui-thread-suffix {gap:.4.96rem; margin-top:.6.95rem; flex-direction: column; align-items: stretch; border-top: 1px solid var(--line); padding-top:.8.06rem;}
  .el-menu-tertiary.open .l-card-prefix {border-radius: var(--r-sm); border: 1px solid var(--line-2); text-align: center; padding:.7.01em;}.c-card{flex-direction: column;}
}

@media (max-width: 600px) {
  .o-tooltip-dot {flex-direction: column; gap:0;}
  .counterSeparator {flex-direction: column; align-items: flex-start;}body .ui-snackbar-bar{margin-inline:0;}
  body {background:#grid_region; color:rgb(9, 10, 21);}
}

/* =================================================================
   print
   ================================================================= */
@media print {html .el-progress-suffix, *.t-tooltip-area, html .u-sort, body .clear-5, .u-filter:not(._ddbf2b), *.app-alert-extra, .l-filter-slot, body .c-stepper, .ui-tag:not(._ddbf2b), html .c-section .t-alert{display: none !important;}.el-layout a{text-decoration:underline;}.el-layout a[href^="http"]::after{color:#5a4561; content: " (" attr(href) ")"; font-size:.7.98em;}
}

  .select-prefix {backface-visibility:visible; border:1px solid #app-section; isolation:auto; box-shadow:none;}