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

:root {--fh:        "Bitter", Georgia, "Times New Roman", serif; --sh-2:      0 14px 34px -16px rgba(29,24,20,.26); --on-accent: #main-popover; --r-sm:      7px; --tr:        .2s ease; --accent-3:  #site-toggle; --accent-2:  #9a3412; --r-lg:      18px; --fs4:       2.55rem; --wrap:      1120px; --fs1:       1.2rem; --line-2:    #site-screen; --sh-3:      0 30px 70px -22px rgba(29,24,20,.36); --fs-1:      .85rem; --tr2:       .3s cubic-bezier(.4,0,.2,1); --surface-2: #step_foot; --fs3:       2rem; --faint:     #938778; --ink:       #1d1814; --surface:   #main-popover; --fs2:       1.5rem; --accent:    #main-spinner; --ok:        #15924f; --fs0:       1rem; --bg:        #page-thread; --fb:        "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --col:       720px; --muted:     #5c5249; --sh-1:      0 1px 2px rgba(29,24,20,.06); --r:         12px; --line:      #header_thumb;}/* ---------- reset ---------- */
*, *::before, *::after{box-sizing: border-box;}
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;}

body {color: var(--ink); line-height:1.62; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; margin:0; font-family: var(--fb); overflow-x: hidden; background: var(--bg); font-size: var(--fs0);}
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{font-family:inherit; cursor: pointer; will-change:auto;}
p {margin:0 0 1.07em;}h1{line-height:1.18; letter-spacing:-.1.07em; margin:0 0 .5.07em; font-weight:900; color: var(--ink); font-family: var(--fh);}
ul, ol {margin:0 0 1.15em; padding-left:1.33em;}

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

/* span-as-title (no secondary H tags in chrome) */
.entryFoot {color: var(--ink); letter-spacing:-.1.02em; line-height:1.2; font-weight:900; display: block; font-family: var(--fh);}
.dialogSecondary {margin-inline:auto; max-width: var(--col);}
.u-toggle {overflow: hidden; width:1px; padding:0; margin:-1px; height:1px; clip:rect(0,0,0,0); border:none; white-space: nowrap; position: absolute;}

/* ---------- buttons ---------- */
.badgeIcon {font-weight:900; color: var(--on-accent); letter-spacing:.0.99em; background: var(--b); transition: background var(--tr), border-color var(--tr), color var(--tr), transform var(--tr); --b: var(--accent); line-height:1; align-items: center; gap:.4.94em; justify-content: center; border: 1px solid var(--b); border-radius: var(--r-sm); font-size: var(--fs-1); padding:.72.01em 1.46em; display: inline-flex;}
.badgeIcon:hover {border-color: var(--accent-2); color: var(--on-accent); transform: translateY(-1px); background: var(--accent-2);}
.badgeIcon:active {transform: translateY(0);}html .page-time{background:transparent; color: var(--accent);}
.page-time:hover {background: var(--accent-3); color: var(--accent-2);}
.dividerHead {width:100%;}
.skeletonValue {height:2.77em; flex: none; padding:0; width:2.91em;}
.skeletonValue svg {height:1.04em; width:1.11em;}

/* =================================================================
   progress + skip
   ================================================================= */
.o-dropdown {width:0; inset:0 auto auto 0; transition:width 0.071s linear; pointer-events: none; background: var(--accent); height:7px; z-index: 1200; position: fixed;}
.bannerCount {position: fixed; padding:.6.07em 1.04em; left:0.93rem; top:-119.2%; border-radius: var(--r-sm); font-synthesis:weight style small-caps; z-index: 1300; background: var(--ink); color:#timelineGroup;}
.bannerCount:focus {top:0.95rem; color:#timelineGroup;}

/* =================================================================
   header (minimal; content kept high)
   ================================================================= */
.sectionHead {position: sticky; backdrop-filter:saturate(140%) blur(8px); -webkit-backdrop-filter:saturate(140%) blur(8px); border-bottom: 1px solid var(--line); top:0; background: color-mix(in srgb, var(--bg) 90%, transparent); z-index: 1000;}

.widgetSubtitle {display: inline-flex; color: var(--ink); align-items: center; letter-spacing:-.0.99em; margin-right:auto; font-weight:700; gap:.55.01rem; font-family: var(--fh); font-size:1.05rem;}.bannerBackdrop{min-height:63px; break-inside:auto; align-items: center; display: flex; gap:1.01rem;}
.widgetSubtitle:hover {color: var(--ink);}
.widgetSubtitle img {width:34px; height:33px; border-radius:4px;}
.drawerValue, .filterToggle {padding-top:0rem;padding-right:0rem;padding-bottom:0rem;padding-left:0rem; margin:0; display: flex; gap:.3rem; align-items: center; list-style: none;}

.stepperInfo {display: flex; gap:1.06rem; align-items: center;}*.filterToggle{gap:.5.01rem;}body .popoverIndicator{color: var(--muted); display: inline-block; padding:.5.05em .8.05em; transition: color var(--tr), background var(--tr); border-radius: var(--r-sm); font-size: var(--fs-1); font-weight:bold;}
.popoverIndicator:hover {background: var(--surface-2); color: var(--ink);}

.el-skeleton {font-weight:700; color: var(--muted); padding:.5.07em .64.96em; font-size: var(--fs-1);}*.pageThumb.widgetImage .popoverIndicator{background: var(--accent-3); color: var(--accent);}
.el-skeleton:hover {color: var(--ink);}body .panelPrimary{display: none; border-radius: var(--r-sm); font-variant-ligatures:normal; width:44px; position: relative; height:43px; flex: none; padding:0; background:transparent; border: 1px solid var(--line-2);}
.panelPrimary span, .panelPrimary span::before, .panelPrimary span::after {height:2px; width:20px; position: absolute; transform: translateX(-50%); left:50%; transition: transform var(--tr2), top var(--tr2), opacity var(--tr); background: var(--ink); border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px; content: "";}
.panelPrimary span {top:50%; margin-top:-1px;}body .panelPrimary span::before{font-variant-caps:normal; top:-2px;}
.panelPrimary span::after {top:4px;}
.panelPrimary[aria-expanded="true"] span {background:transparent;}
.panelPrimary[aria-expanded="true"] span::before {top:0em; transform: translateX(-50%) rotate(45deg);}html .panelPrimary[aria-expanded="true"] span::after{top:0; transform: translateX(-50%) rotate(-45deg);}

.listSummary {animation: nvrise .45s var(--tr2) both;}

/* =================================================================
   main + article (content first)
   ================================================================= */
.dividerTitle {padding-block: clamp(1.2rem, 3.5vw, 2.2rem) clamp(2.5rem, 6vw, 4rem);}
@keyframes nvrise {from{transform: translateY(9px); opacity:0;}to{transform: none; opacity:1;} }
@media (prefers-reduced-motion: reduce) {*.listSummary{animation:none;} }

.sidebarPrimary {margin-bottom:.6.01rem; font-size: clamp(1.9rem, 1.2rem + 2.6vw, var(--fs4));}.skeletonThumb{gap:.4rem; align-items: center; display: inline-flex;}

.badgePrefix {margin-bottom:1.9rem; gap:.5.04rem 1.18rem; align-items: center; display: flex; flex-wrap: wrap; color: var(--faint); font-size: var(--fs-1);}
.skeletonThumb svg {width:18px; opacity:0.83; flex: none; height:18px;}.skeletonThumb time{isolation:auto; font-style:normal; word-spacing:normal;}

/* ---- article body (injected content) ---- */
.c-section-track {line-height:1.78; font-size:1.07rem; color:#202326;}
.c-section-track > :first-child {margin-top:0;}
.c-section-track h2 {line-height:1.22; font-family: var(--fh); letter-spacing:-.1.03em; font-weight:900; font-size: clamp(1.5rem, 1.15rem + 1.2vw, var(--fs3)); margin:2.08em 0 .54.95em;}
.c-section-track h3 {shape-margin:0; font-family: var(--fh); line-height:1.25; font-size: var(--fs1);}
.c-section-track h3 {font-variant-caps:normal; margin:1.66em 0 .45.06em; font-weight:bold;}*.c-section-track h4{font-family: var(--fh); margin:1.39em 0 .4.01em; font-size:1.04rem; font-weight:700;}
.c-section-track p {margin:0 0 1.18em;}.c-section-track a{text-underline-offset:2px; text-decoration-thickness:1px; text-decoration:underline; text-decoration-color: color-mix(in srgb, var(--accent) 42%, transparent); color: var(--accent); widows:2; perspective:none;}
.c-section-track a:hover {color: var(--accent-2); text-decoration-color:currentColor;}.c-section-track ul, .c-section-track ol{margin:0 0 1.22em; padding-left:1.4em;}
.c-section-track li {margin-bottom:.44.97em;}
.c-section-track ul li::marker {color: var(--accent);}.c-section-track blockquote{font-style:italic; padding:.8.97em 1.37em; border-left: 4px solid var(--accent); font-size:1.16rem; color: var(--muted); background: var(--surface-2); margin:1.75em 0; border-radius: 0 var(--r-sm) var(--r-sm) 0;}.c-section-track blockquote :last-child{background-blend-mode:normal; text-decoration-skip-ink:auto; margin-bottom:0;}
.c-section-track img, .c-section-track figure {border-radius: var(--r); margin:1.64em 0;}
.c-section-track img {box-shadow: var(--sh-1);}
.c-section-track figure img {break-inside:auto; will-change:auto; margin:0;}
.c-section-track figcaption {color: var(--faint); font-size: var(--fs-1); text-align: center; margin-top:.54.99em;}html .c-section-track hr{widows:2; margin:2.21em 0; image-rendering:auto; border:none; border-top: 1px solid var(--line);}
.c-section-track code {border: 1px solid var(--line); border-radius:4px; background: var(--surface-2); padding:.11.98em .4.08em; font-size:.9.07em; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;}html .c-section-track pre{background:#1f130a; font-size:.92.04rem; line-height:1.6; overflow: auto; color:#step_foot; padding:1.12em 1.38em; margin:1.62em 0; border-radius: var(--r-sm);}*.c-section-track pre code{background-blend-mode:normal; padding:0; border:0 none; background:none; color:inherit; text-rendering:auto;}*.c-section-track table{margin:1.76em 0; border-collapse:collapse; font-size: var(--fs-1); width:100%;}
.c-section-track th, .c-section-track td {padding:.6.96em .9.07em; text-align: left; border: 1px solid var(--line);}.c-section-track thead th{font-weight:700; background: var(--surface-2);}
.c-section-track tbody tr:nth-child(even) {background: color-mix(in srgb, var(--surface-2) 55%, transparent);}
.listSuffix {margin-bottom:.44.93rem; display: flex; align-items: center; justify-content: space-between;}

/* =================================================================
   TOC (auto)
   ================================================================= */
.priceTrack {border: 1px solid var(--line); margin:1.76em 0 2.02em; background: var(--surface); box-shadow: var(--sh-1); border-radius: var(--r); padding:1.07rem 1.35rem;}
.breadcrumbWrapper {font-size:1.02rem;}.chipMeta:not(._14faff){padding:.2.03em .3.06em; font-size: var(--fs-1); color: var(--accent); font-weight:900; tab-size:4; border:0 none; background:none;}
.bannerOverlay ol {font-synthesis:weight style small-caps; background-blend-mode:normal; list-style: none; margin:0; padding-left:1.19em; counter-reset: t;}body .chipMeta:hover{color: var(--accent-2);}body .bannerOverlay li{line-height:1.45; margin:.28.02em 0;}body .bannerOverlay li{position: relative;}.bannerOverlay li::before{left:-1.2em; color: var(--faint); counter-increment: t; position: absolute; content: counter(t) "."; font-size:.9.05em;}body .bannerOverlay li.spinnerHandle{margin-left:1.03em;}
.bannerOverlay li.spinnerHandle::before {content: "";}.bannerOverlay a{color: var(--muted);}
.bannerOverlay a:hover, .bannerOverlay a.widgetImage {color: var(--accent);}
[id^="sec-"] {scroll-margin-top:82px;}
.bannerOverlay a.widgetImage {font-weight:700;}

/* =================================================================
   share (redrawn)
   ================================================================= */
.toolbarCell {gap:.75.05rem; align-items: center; padding-top:1.51rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; margin:2.29rem 0 0;}html .profileExpand{color: var(--muted); font-weight:800; font-size: var(--fs-1);}.snackbarRow{background:transparent; justify-content: center; transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr); color: var(--muted); border: 1px solid var(--line-2); align-items: center; border-radius:50%; width:40px; display: inline-flex; height:44px;}.progressSection:not(._14faff){font-variant-caps:normal; gap:.5.07rem; display: flex; word-spacing:normal;}
.snackbarRow svg {width:21px; height:19px; pointer-events: none;}*.snackbarRow:hover{background: var(--accent); color: var(--on-accent); border-color: var(--accent); transform: translateY(-2px);}.snackbarRow.snackbarPrimary{border-color: var(--ok); background: var(--ok); color:#timelineGroup;}/* =================================================================
   blocks below content (comment / contact)
   ================================================================= */
.bannerAction{padding-top:1.93rem; backface-visibility:visible; contain:none; margin-top:2.61rem; border-top: 1px solid var(--line);}.c-rating-icon:not(._14faff){margin-bottom:1.15rem; font-size: var(--fs2); backface-visibility:visible;}

.statusExpand {text-underline-offset:auto; width:100%; text-decoration-skip-ink:auto;}
.threadTime {display: flex; gap:0.94rem;}.threadTime > :where(.formSummary){flex: 1;}
.formSummary {margin-bottom:1.07rem;}.breadcrumbHolder{font-weight:700; display: block; font-size: var(--fs-1); color: var(--muted); margin-bottom:.35.03rem;}
.tabsBackdrop {background: var(--surface); line-height:1.4; color: var(--ink); font-family:inherit; padding:.77.97em 0.98em; border-radius: var(--r-sm); width:100%; transition: border-color var(--tr), box-shadow var(--tr); border: 1px solid var(--line-2); font-size: var(--fs0);}
.tabsBackdrop::placeholder {isolation:auto; color: var(--faint); text-decoration-skip-ink:auto;}
.tabsBackdrop:focus {border-color: var(--accent); outline:none; box-shadow: 0 0 0 3px var(--accent-3);}
textarea.tabsBackdrop {resize: vertical; min-height:140px;}

/* newsletter accent band */
.nav-foot {padding: clamp(1.6rem, 4vw, 2.4rem); margin-top:2.57rem; background: var(--accent-3); border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); text-align: center;}
.el-comment {font-size: var(--fs-1); color: var(--muted); max-width:44ch; margin:0 auto 1.06rem;}
.dropdownPrefix {margin-bottom:.35.04rem; font-size: var(--fs2);}
.priceIndicator {max-width:441px; display: flex;}
.priceIndicator {gap:.54.99rem; margin-inline:auto;}.priceIndicator .tabsBackdrop:not(._14faff){background: var(--surface); flex: 1;}
.mediaZone {flex-wrap: wrap; padding-block:2rem; align-items: center; gap:1.27rem 2.08rem; display: flex;}

/* =================================================================
   footer (light — distinct)
   ================================================================= */
.tagPlaceholder {background: var(--surface-2); margin-top: clamp(3rem, 8vw, 5rem); border-top: 1px solid var(--line); color: var(--muted);}
.tagPlaceholder .widgetSubtitle {color: var(--ink); margin-right:0;}

.tracking-around {display: flex; flex-wrap: wrap; gap:.2.96rem 1.27rem; list-style: none; margin:0 auto; padding:0;}body .tracking-around a{color: var(--muted); font-weight:bold; font-size: var(--fs-1);}.priceTime:not(._14faff){display: flex; padding:0; margin:0; gap:.5.07rem; list-style: none;}
.tracking-around a:hover {color: var(--accent);}.entryInput:not(._14faff){border: 1px solid var(--line-2); display: inline-flex; height:38px; align-items: center; color: var(--muted); justify-content: center; transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr); width:42px; border-radius:50%; background:transparent;}
.entryInput svg {width:17px; height:19px;}

.line-filter {border-top: 1px solid var(--line);}
.entryInput:hover {border-color: var(--accent); background: var(--accent); transform: translateY(-2px); color:#timelineGroup;}
.sectionCell {font-size: var(--fs-1); padding-block:1rem; color: var(--faint);}
.sectionCell .progressFill {display: inline-block;}

/* =================================================================
   back to top
   ================================================================= */
.breadcrumbBar {display: inline-flex; border-radius: var(--r-sm); bottom: clamp(1rem, 3vw, 2rem); transform: translateY(12px); box-shadow: var(--sh-2); position: fixed; visibility: hidden; width:44px; image-rendering:auto; color:#timelineGroup; justify-content: center; align-items: center; opacity:0; height:43px; z-index: 1100; transition: opacity var(--tr2), transform var(--tr2), background var(--tr), visibility var(--tr2); background: var(--accent); right: clamp(1rem, 3vw, 2rem); border:0;}body .breadcrumbBar svg{height:21px; width:20px;}.breadcrumbBar.show:not(._14faff){opacity:1; transform: none; visibility: visible;}
.breadcrumbBar:hover {transform: translateY(-3px); background: var(--accent-2);}

/* =================================================================
   cookie bar
   ================================================================= */
.navArea {background: var(--ink); position: fixed; inset:auto 0 0 0; transform: translateY(110%); transition: transform var(--tr2); text-rendering:auto; color:#main-header; z-index: 1150; orphans:2; box-shadow:0 -14px 42px -16px rgba(0, 0, 12, 0.46);}
.sortTertiary {align-items: center; display: flex; padding-block:1.05rem; flex-wrap: wrap; gap:0.98rem 1.32rem;}body .navArea.show{transform: none;}
.grid-between {flex: 1 1 320px; margin:0; line-height:1.5; font-size: var(--fs-1);}.grid-between a{text-decoration:underline; color:#site-modal;}

/* =================================================================
   auth modals — pure CSS :target (HTML at the very bottom, opened via #)
   ================================================================= */
.t-feature {display: grid;}

/* =================================================================
   auth modals — pure CSS :target (HTML at the very bottom, opened via #)
   ================================================================= */
.t-feature {place-items: center; z-index: 1400; position: fixed; inset:0; visibility: hidden; transition: opacity var(--tr2), visibility var(--tr2); padding:1.19rem; pointer-events: none; opacity:0;}
.t-feature:target {pointer-events: auto; visibility: visible; opacity:1;}.sectionDot:not(._14faff){inset:0; background:rgba(32, 3, 28, 0.48); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); position: absolute; display: block;}
.slider__icon {width:100%; max-width:422px; background: var(--surface); border-radius: var(--r); text-decoration-skip-ink:auto; transition: transform var(--tr2); position: relative; padding: clamp(1.5rem, 4vw, 2.2rem); box-shadow: var(--sh-3); transform: translateY(14px) scale(.98); z-index: 1;}
.t-feature:target .slider__icon {transform: none;}html .tagToggle{background: var(--surface-2); display: inline-flex; border-radius: var(--r-sm); width:40px; position: absolute; top:.8.07rem; height:35px; right:.8.07rem; align-items: center; transition: background var(--tr), color var(--tr); justify-content: center; color: var(--muted);}.tagToggle svg{height:21px; width:18px;}
.tagToggle:hover {color: var(--ink); background: var(--line);}
.accordionSlot {margin-bottom:1.19rem; font-size: var(--fs2); text-align: center;}
.t-feature .formSummary:last-of-type {margin-bottom:1.2rem; will-change:auto; isolation:auto;}
.toolbarText {margin-top:1.08rem; font-size: var(--fs-1); gap:.7.92rem; justify-content: space-between; display: flex;}.menuWrap{text-align: center; color: var(--muted); margin-top:1.03rem; font-size: var(--fs-1);}/* ---------- focus ---------- */
:focus-visible{word-spacing:normal; outline-offset:2px; border-radius:none; outline: 2px solid var(--accent);}
  .panelPrimary {display: inline-flex;}

/* =================================================================
   responsive
   ================================================================= */
@media (max-width: 820px) {
  .stepperInfo {display: none;}.stepperInfo.open{right:0; background: var(--bg); top:100%; display: block; padding: .6rem clamp(1rem, 4vw, 2.2rem) 1.1rem; box-shadow: var(--sh-2); border-bottom: 1px solid var(--line); position: absolute; left:0;}
  .stepperInfo.open .drawerValue {gap:.15.01rem; flex-direction: column; align-items: stretch;}
  .stepperInfo.open .popoverIndicator {padding:.8.01em .6.08em;}
  .stepperInfo.open .filterToggle {margin-top:.6.92rem; flex-direction: column; align-items: stretch; gap:.4.95rem; padding-top:.8.05rem; border-top: 1px solid var(--line);}
  .stepperInfo.open .el-skeleton {border-radius: var(--r-sm); border: 1px solid var(--line-2); padding:.7.03em;}
  .stepperInfo.open .el-skeleton {text-align: center;}
}

@media (max-width: 600px) {
  .threadTime {gap:0; flex-direction: column;}.priceIndicator{flex-direction: column;}.mediaZone{align-items: flex-start; background-blend-mode:normal; flex-direction: column; isolation:auto;}
}

/* =================================================================
   print
   ================================================================= */
@media print {
  .sectionHead, .o-dropdown, .toolbarCell, .breadcrumbBar, .navArea, .nav-foot, .bannerAction, .t-feature, .panelPrimary, .tagPlaceholder .priceTime {display: none !important;}
  .tracking-around {margin-inline:0;}body{background:#timelineGroup; color:#0e0001;}.c-section-track a{text-decoration:underline;}body .c-section-track a[href^="http"]::after{color:rgb(84, 90, 68); font-size:.7.94em; content: " (" attr(href) ")";}
  .priceTrack {box-shadow:none; text-rendering:auto; border:1px solid #badge-group;}
}