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

:root{--fh:        "Bitter", Georgia, "Times New Roman", serif; --fs1:       1.2rem; --r-sm:      7px; --wrap:      1120px; --surface-2: #site-avatar; --line-2:    #view_cell; --accent-3:  #app-list; --accent-2:  #9a3412; --fs-1:      .85rem; --fs2:       1.5rem; --col:       720px; --line:      #stepper-spacer; --bg:        #app-breadcrumb; --fs4:       2.55rem; --faint:     #938778; --fs0:       1rem; --r:         12px; --tr2:       .3s cubic-bezier(.4,0,.2,1); --sh-1:      0 1px 2px rgba(29,24,20,.06); --on-accent: #site-timeline; --ink:       #1d1814; --accent:    #block-line; --fs3:       2rem; --r-lg:      18px; --muted:     #5c5249; --ok:        #15924f; --tr:        .2s ease; --fb:        "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --sh-3:      0 30px 70px -22px rgba(29,24,20,.36); --sh-2:      0 14px 34px -16px rgba(29,24,20,.26); --surface:   #site-timeline;}/* ---------- 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{overflow-x: hidden; color: var(--ink); font-family: var(--fb); font-size: var(--fs0); -webkit-font-smoothing:antialiased; background: var(--bg); margin:0; text-rendering:optimizeLegibility; line-height:1.62;}

img, svg, video {max-width:100%; height:auto;}

img, svg, video {display: block;}
a {transition: color var(--tr); text-decoration:none; mix-blend-mode:normal; color: var(--accent); image-rendering:auto;}
svg {orphans:2; fill:currentColor; hyphens:manual;}
button {cursor: pointer; font-family:inherit;}a:hover{color: var(--accent-2);}h1{line-height:1.18; font-family: var(--fh); letter-spacing:-.0.95em; text-underline-offset:auto; margin:0 0 .5.08em; color: var(--ink); font-weight:700;}
p {backface-visibility:visible; margin:0 0 1.16em; word-spacing:normal;}
ul, ol {margin:0 0 1.08em; padding-left:1.33em;}

/* span-as-title (no secondary H tags in chrome) */
.l-post-text {font-family: var(--fh); letter-spacing:-.1em; color: var(--ink); display: block; font-weight:800;}

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

/* span-as-title (no secondary H tags in chrome) */
.l-post-text {line-height:1.2;}.pagination__name--fixed:not(._e44c7a){white-space: nowrap; margin:-1px; border:none; height:1px; overflow: hidden; width:1px; padding:0; clip:rect(0,0,0,0); position: absolute;}
.opacity-10 {margin-inline:auto; max-width: var(--col);}/* ---------- buttons ---------- */
.u-chip-line{justify-content: center; display: inline-flex; gap:.4.97em; border: 1px solid var(--b); line-height:1; align-items: center; font-size: var(--fs-1); background: var(--b); padding:.71.99em 1.41em; font-weight:900; background-blend-mode:normal; transition: background var(--tr), border-color var(--tr), color var(--tr), transform var(--tr); border-radius: var(--r-sm); --b: var(--accent); letter-spacing:.0.96em; color: var(--on-accent);}html .u-chip-line:hover{transform: translateY(-1px); border-color: var(--accent-2); color: var(--on-accent); background: var(--accent-2);}
.u-chip-line:active {transform: translateY(0);}html .o-toolbar{background:transparent; color: var(--accent);}
.o-toolbar:hover {background: var(--accent-3); break-inside:auto; color: var(--accent-2);}.t-alert-image{width:100%;}.app-menu-wrap{height:2.88em; width:2.92em; padding:0; flex: none;}
.app-menu-wrap svg {height:1.03em; width:1.02em;}/* =================================================================
   progress + skip
   ================================================================= */
.d-xs{pointer-events: none; width:0px; inset:0 auto auto 0; transition:width 0.123s linear; position: fixed; height:1px; background: var(--accent); z-index: 1200;}.l-rating{border-radius: var(--r-sm); color:#site-tag; background: var(--ink); padding:.6.01em 0.98em; left:0.94rem; position: fixed; top:-118.5%; z-index: 1300;}
.l-rating:focus {color:#site-tag; top:1.07rem;}/* =================================================================
   header (minimal; content kept high)
   ================================================================= */
.l-review:not(._e44c7a){border-bottom: 1px solid var(--line); font-synthesis:weight style small-caps; -webkit-backdrop-filter:saturate(140%) blur(8px); top:0; position: sticky; z-index: 1000; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:saturate(140%) blur(8px);}
.el-modal-prefix {min-height:64px; display: flex; gap:0.98rem; align-items: center;}.avatarButton:not(._e44c7a){letter-spacing:-.1.08em; align-items: center; color: var(--ink); font-weight:800; widows:2; image-rendering:auto; display: inline-flex; margin-right:auto; font-size:1.13rem; gap:.54.95rem; font-family: var(--fh);}body .avatarButton:hover{image-rendering:auto; text-decoration-skip-ink:auto; color: var(--ink);}

.app-toolbar {gap:1.04rem; align-items: center; display: flex;}*.avatarButton img{border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px; width:28px; height:30px;}
.el-slider, .grid-spacer {padding:0; display: flex; gap:.3.03rem; list-style: none; tab-size:4; margin:0; align-items: center;}
.grid-spacer {gap:.4.99rem;}*.app-slider{transition: color var(--tr), background var(--tr); padding:.4.97em .8.02em;}*.app-slider{font-weight:700; font-size: var(--fs-1); border-radius: var(--r-sm); color: var(--muted); display: inline-block;}
.app-slider:hover {color: var(--ink); background: var(--surface-2);}
.entry.ui-reply .app-slider {color: var(--accent); background: var(--accent-3);}

.o-thread {color: var(--muted); padding:.5.06em .65em; font-weight:700; transform-style:flat; mix-blend-mode:normal; font-size: var(--fs-1);}
.o-thread:hover {color: var(--ink);}

.alert__column--sparse {border-radius: var(--r-sm); background:transparent; width:45px; height:46px; padding:0; border: 1px solid var(--line-2); position: relative; display: none; flex: none;}
.alert__column--sparse span, .alert__column--sparse span::before, .alert__column--sparse span::after {content: ""; background: var(--ink); left:50%; transform: translateX(-50%); transition: transform var(--tr2), top var(--tr2), opacity var(--tr); height:2px; position: absolute; width:16px; border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;}.alert__column--sparse span{margin-top:-1px; top:50%;}
.alert__column--sparse span::before {top:-6px;}html .alert__column--sparse span::after{top:8px;}
.alert__column--sparse[aria-expanded="true"] span {background:transparent;}body .alert__column--sparse[aria-expanded="true"] span::before{transform: translateX(-50%) rotate(45deg); top:0;}
.alert__column--sparse[aria-expanded="true"] span::after {transform: translateX(-50%) rotate(-45deg); top:0;}/* =================================================================
   main + article (content first)
   ================================================================= */
.toggleSection{padding-block: clamp(1.2rem, 3.5vw, 2.2rem) clamp(2.5rem, 6vw, 4rem);}*.el-breadcrumb{animation: nvrise .45s var(--tr2) both;}
@keyframes nvrise { from {opacity:0; transform: translateY(9px);} to {transform: none; opacity:1;} }
@media (prefers-reduced-motion: reduce) { .el-breadcrumb {animation:none;} }

.l-sidebar-row {font-size: clamp(1.9rem, 1.2rem + 2.6vw, var(--fs4)); break-inside:auto; margin-bottom:.6.08rem; tab-size:4;}

.ui-box {-webkit-hyphens:manual;-ms-hyphens:manual;margin-bottom:1.83rem; color: var(--faint); align-items: center; gap:.4.96rem 1.14rem; hyphens:manual; flex-wrap: wrap; print-color-adjust:economy; font-size: var(--fs-1); display: flex;}
.mt-md {gap:.4.01rem; align-items: center; display: inline-flex;}.mt-md svg{flex: none; height:14px; opacity:0.73; width:18px;}
.mt-md time {font-style:normal;}/* ---- article body (injected content) ---- */
.l-comment-name{font-size:1.14rem; color:rgb(37, 16, 13); line-height:1.78;}
.l-comment-name > :first-child {margin-top:0; isolation:auto; widows:2;}
.l-comment-name h2 {letter-spacing:-.0.95em; font-size: clamp(1.5rem, 1.15rem + 1.2vw, var(--fs3)); font-family: var(--fh); line-height:1.22; font-weight:800; margin:2.02em 0 .54.99em;}
.l-comment-name h3 {font-size: var(--fs1); font-family: var(--fh); line-height:1.25; background-blend-mode:normal; font-weight:700; margin:1.61em 0 .44.99em; word-spacing:normal;}
.l-comment-name h4 {margin:1.32em 0 .4em; font-family: var(--fh); font-weight:bold; font-size:1.07rem;}.l-comment-name p{margin:0 0 1.22em;}
.l-comment-name a {color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 42%, transparent); will-change:auto; text-underline-offset:2px; text-decoration-thickness:1px; text-decoration:underline; hyphens:manual;}*.l-comment-name a:hover{text-decoration-color:currentColor; color: var(--accent-2);}
.l-comment-name ul, .l-comment-name ol {margin:0 0 1.26em; padding-left:1.41em;}
.l-comment-name li {margin-bottom:.44.93em;}*.l-comment-name ul li::marker{color: var(--accent);}
.l-comment-name blockquote {padding:.9.01em 1.34em; background: var(--surface-2); color: var(--muted); margin:1.74em 0; font-size:1.2rem; font-style:italic; word-spacing:normal; border-left: 4px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0;}.l-comment-name blockquote :last-child{hyphens:manual; margin-bottom:0; text-underline-offset:auto;}
.l-comment-name img, .l-comment-name figure {margin:1.65em 0; border-radius: var(--r);}
.l-comment-name img {box-shadow: var(--sh-1);}
.l-comment-name figure img {margin:0;}.l-comment-name figcaption{color: var(--faint); font-size: var(--fs-1);}.l-comment-name figcaption{text-align: center; margin-top:.55.03em;}.l-comment-name hr{border:none; border-top: 1px solid var(--line); margin:2.13em 0;}
.l-comment-name code {font-size:.9.01em; border: 1px solid var(--line); padding:.11.94em .4.08em; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; mix-blend-mode:normal; border-radius:8px; background: var(--surface-2); background-blend-mode:normal;}
.l-comment-name pre {border-radius: var(--r-sm); margin:1.57em 0; font-size:.91.99rem; color:#site-avatar; background:#191820; padding:1.06em 1.29em; line-height:1.6; overflow: auto;}.l-comment-name pre code{padding:0em; color:inherit; background:none; border:0 none;}
.l-comment-name table {font-size: var(--fs-1); width:100%; margin:1.62em 0; border-collapse:collapse;}*.l-comment-name th, .l-comment-name td{border: 1px solid var(--line); padding:.7.04em .8.94em; text-align: left;}
.l-comment-name thead th {background-blend-mode:normal; background: var(--surface-2); font-weight:700;}
.l-comment-name tbody tr:nth-child(even) {background: color-mix(in srgb, var(--surface-2) 55%, transparent); hyphens:manual;}

/* =================================================================
   TOC (auto)
   ================================================================= */
.t-nav-extra {padding:0.98rem 1.3rem; box-shadow: var(--sh-1); margin:1.75em 0 2.06em; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r);}
.o-chip {margin-bottom:.45.06rem;}
.o-chip {justify-content: space-between; display: flex; align-items: center;}
.el-rating-info {page-break-inside:auto; font-size:1.08rem; transform-style:flat;}
.o-entry-dot {color: var(--accent); background:none; font-weight:900; border:0; font-size: var(--fs-1); padding:.2.02em .2.94em;}
.o-entry-dot:hover {color: var(--accent-2);}
.c-alert ol {list-style: none; counter-reset: t; margin:0; padding-left:1.17em;}
.c-alert li {position: relative; margin:.28.03em 0; line-height:1.45;}*.c-alert li::before{contain:none; counter-increment: t; content: counter(t) "."; left:-1.17em; position: absolute; color: var(--faint); font-size:.8.97em;}
.c-alert li.app-thread-holder {margin-left:1.04em;}*.c-alert li.app-thread-holder::before{content: "";}
.c-alert a {color: var(--muted); background-blend-mode:normal;}
.c-alert a:hover, .c-alert a.ui-reply {color: var(--accent);}
.c-alert a.ui-reply {print-color-adjust:economy; font-variant-caps:normal; font-weight:bold;}[id^="sec-"]{scroll-margin-top:82px;}

/* =================================================================
   share (redrawn)
   ================================================================= */
.o-form-slot {border-top: 1px solid var(--line); align-items: center; gap:.75.08rem; padding-top:1.52rem; display: flex; margin:2.22rem 0 0; flex-wrap: wrap;}
.ui-select {color: var(--muted); font-weight:900; font-size: var(--fs-1);}html .el-layout{gap:.5.01rem; orphans:2; display: flex; backface-visibility:visible;}
.o-grid {align-items: center; color: var(--muted); background:transparent; height:37px; border-radius:50%; justify-content: center; border: 1px solid var(--line-2); display: inline-flex; width:37px; transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr);}*.o-grid svg{height:17px; width:17px; pointer-events: none;}
.o-grid:hover {transform: translateY(-2px); background: var(--accent); color: var(--on-accent); border-color: var(--accent);}

/* =================================================================
   blocks below content (comment / contact)
   ================================================================= */
.c-popover {border-top: 1px solid var(--line); padding-top:1.98rem; margin-top:2.54rem;}
.o-grid.o-pagination {color:#site-tag; background: var(--ok); border-color: var(--ok);}
.u-timeline {margin-bottom:1.18rem; font-size: var(--fs2);}*.ui-footer-holder{font-synthesis:weight style small-caps; width:100%;}.app-reply{gap:1.02rem; display: flex;}*.app-reply > .app-alert-name{flex: 1;}
.app-alert-name {margin-bottom:0.99rem; will-change:auto; font-variant-caps:normal;}
.post__region--large {color: var(--muted); margin-bottom:.34.97rem; font-size: var(--fs-1); display: block; font-weight:700;}
.u-nav-region {width:100%; background: var(--surface); padding:.77.95em 1.06em; font-family:inherit; transition: border-color var(--tr), box-shadow var(--tr); border-radius: var(--r-sm); border: 1px solid var(--line-2); font-size: var(--fs0); line-height:1.4; color: var(--ink);}
.u-nav-region::placeholder {color: var(--faint);}
.u-nav-region:focus {border-color: var(--accent); outline:none; box-shadow: 0 0 0 3px var(--accent-3);}
textarea.u-nav-region {min-height:142px; resize: vertical;}

/* newsletter accent band */
.dialog--small {background: var(--accent-3); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); text-align: center; padding: clamp(1.6rem, 4vw, 2.4rem); margin-top:2.54rem; border-radius: var(--r-lg);}
.app-toolbar-primary {margin-bottom:.34.99rem; font-size: var(--fs2);}.c-modal{color: var(--muted); font-size: var(--fs-1); max-width:44ch; text-decoration-skip-ink:auto; margin:0 auto 1.06rem;}
.ui-skeleton-text {display: flex; max-width:439px; gap:.55.04rem; margin-inline:auto;}
.ui-skeleton-text .u-nav-region {flex: 1; background: var(--surface);}

/* =================================================================
   footer (light — distinct)
   ================================================================= */
.l-carousel {border-top: 1px solid var(--line); background: var(--surface-2); color: var(--muted); margin-top: clamp(3rem, 8vw, 5rem);}html .l-carousel .avatarButton{margin-right:0; color: var(--ink);}body .ui-menu{display: flex; gap:1.23rem 1.96rem; flex-wrap: wrap; padding-block:2rem; align-items: center;}

.u-filter {flex-wrap: wrap; gap:.3.06rem 1.12rem; margin:0 auto; list-style: none; padding:0; display: flex;}
.u-filter a {font-size: var(--fs-1); font-weight:700; color: var(--muted);}.u-filter a:hover{color: var(--accent);}

.el-section {display: flex; list-style: none; gap:.5rem;}

.el-section {padding:0; margin:0;}
.ui-sort {height:39px; background:transparent; color: var(--muted); border-top-left-radius:50%;border-top-right-radius:50%;border-bottom-right-radius:50%;border-bottom-left-radius:50%; display: inline-flex; border: 1px solid var(--line-2); width:37px; transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr); align-items: center; justify-content: center;}html .ui-sort svg{height:18px; width:12px;}*.ui-sort:hover{color:#site-tag; background: var(--accent); border-color: var(--accent); transform: translateY(-2px);}

.selectSeparator {border-top: 1px solid var(--line);}
.post-toggle-narrow {font-size: var(--fs-1); padding-block:1rem;}
.post-toggle-narrow {color: var(--faint);}
.post-toggle-narrow .c-spinner-summary {display: inline-block;}

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

/* =================================================================
   cookie bar
   ================================================================= */
.el-media-head {z-index: 1150; box-shadow:0 -6px 41px -14px rgba(8, 15, 0, 0.56); transform: translateY(110%); color:#boxExpand; background: var(--ink); transition: transform var(--tr2); position: fixed; inset:auto 0 0 0;}
.el-media-head.show {transform: none;}.u-stepper-close:not(._e44c7a){line-height:1.5; font-size: var(--fs-1); flex: 1 1 320px; margin:0;}html .el-nav{flex-wrap: wrap; display: flex; padding-block:1.05rem; gap:0.99rem 1.35rem; align-items: center;}.u-stepper-close a{text-decoration:underline; color:#page-comment;}

/* =================================================================
   auth modals — pure CSS :target (HTML at the very bottom, opened via #)
   ================================================================= */
.boxHead {word-spacing:normal; pointer-events: none; visibility: hidden; position: fixed; display: grid; z-index: 1400; transition: opacity var(--tr2), visibility var(--tr2); inset:0em; padding:1.26rem; opacity:0; place-items: center;}
.boxHead:target {visibility: visible;}
.boxHead:target {pointer-events: auto; opacity:1;}*.header--bottom{text-rendering:auto; display: block; position: absolute; background-blend-mode:normal; background:rgba(38, 32, 1, 0.48); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); inset:0;}
.c-comment {border-radius: var(--r); width:100%; position: relative; padding: clamp(1.5rem, 4vw, 2.2rem); transition: transform var(--tr2); z-index: 1; transform: translateY(14px) scale(.98); box-shadow: var(--sh-3); max-width:423px; background: var(--surface);}
.boxHead:target .c-comment {transform: none;}
.o-price-button {background: var(--surface-2);}
.o-price-button {display: inline-flex; width:37px; height:36px; top:.7.98rem; align-items: center; justify-content: center; border-radius: var(--r-sm); position: absolute; transition: background var(--tr), color var(--tr); right:.8rem; color: var(--muted);}
.o-price-button svg {width:20px; height:20px;}body .o-price-button:hover{background: var(--line); color: var(--ink);}
.thread__indicator--narrow {font-size: var(--fs2); text-align: center; margin-bottom:1.19rem;}
.boxHead .app-alert-name:last-of-type {margin-bottom:1.15rem;}
.el-skeleton-cell {justify-content: space-between; gap:.8.01rem; font-size: var(--fs-1); display: flex; margin-top:0.98rem;}
.t-stepper-image {font-size: var(--fs-1); margin-top:1.07rem; text-align: center; color: var(--muted);}

/* ---------- focus ---------- */
:focus-visible {outline-offset:2px; border-radius:-1px; outline: 2px solid var(--accent);}

/* =================================================================
   responsive
   ================================================================= */
@media (max-width: 820px) {.app-toolbar{display: none;}.alert__column--sparse{display: inline-flex; text-underline-offset:auto;}
  .app-toolbar.open {border-bottom: 1px solid var(--line); position: absolute; left:0; right:0; background: var(--bg); top:100%; box-shadow: var(--sh-2); display: block; padding: .6rem clamp(1rem, 4vw, 2.2rem) 1.1rem;}
  .app-toolbar.open .el-slider {gap:.14.99rem; align-items: stretch; flex-direction: column;}
  .app-toolbar.open .app-slider {orphans:2; padding:.7.99em .6em; isolation:auto;}body .app-toolbar.open .grid-spacer{gap:.5.01rem; padding-top:.7.93rem; align-items: stretch; margin-top:.6.97rem; will-change:auto; border-top: 1px solid var(--line); flex-direction: column;}
  .app-toolbar.open .o-thread {padding:.7.06em; border-radius: var(--r-sm); border: 1px solid var(--line-2); text-align: center;}
}

@media (max-width: 600px) {
  .app-reply {gap:0; flex-direction: column;}.ui-skeleton-text{flex-direction: column;}*.u-filter{transform-style:flat; isolation:auto; margin-inline:0;}
  .ui-menu {align-items: flex-start; flex-direction: column;}
}

/* =================================================================
   print
   ================================================================= */
@media print {html .l-review, *.d-xs, .o-form-slot, *.o-stepper, .el-media-head:not(._e44c7a), .dialog--small, .c-popover:not(._e44c7a), body .boxHead, .alert__column--sparse, .l-carousel .el-section:not(._e44c7a){display: none !important;}
  body {color:hsl(0, 99.2%, 1.4%); background:#site-tag;}
  .l-comment-name a {text-decoration:underline;}
  .l-comment-name a[href^="http"]::after {color:#5b5745; background-blend-mode:normal; content: " (" attr(href) ")"; font-size:.7.97em;}
  .t-nav-extra {border:1px solid #app-page; box-shadow:none;}
}