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

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

/* ---------- 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;} }

body {margin:0; line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x: hidden; font-size: var(--fs0); font-family: var(--fb); color: var(--ink); background: var(--bg);}svg{backface-visibility:visible; text-underline-offset:auto; fill:currentColor;}img, svg, video{height:auto; display: block; max-width:100%;}
a {transition: color var(--tr); color: var(--accent); text-decoration:none;}
button {font-family:inherit; cursor: pointer;}
a:hover {color: var(--accent-2);}
p {transform-style:flat; print-color-adjust:economy; margin:0 0 1.17em;}h1{margin:0 0 .4.93em; line-height:1.18; font-weight:900; font-family: var(--fh); letter-spacing:-.1.01em; color: var(--ink);}
ul, ol {margin:0 0 1.09em; padding-left:1.38em; text-rendering:auto;}

/* ---------- primitives ---------- */
.thumb-entry {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) */
.headerBackdrop {color: var(--ink); font-weight:700; line-height:1.2; letter-spacing:-.0.96em; display: block; font-family: var(--fh);}html .statusTertiary{margin-inline:auto; max-width: var(--col);}
.screen-center {border:0em; margin:-1px; padding:0; position: absolute; height:1px; overflow: hidden; white-space: nowrap; clip:rect(0,0,0,0); width:1px;}/* ---------- buttons ---------- */
.postCap{transition: background var(--tr), border-color var(--tr), color var(--tr), transform var(--tr); letter-spacing:.1.08em; --b: var(--accent); border: 1px solid var(--b); line-height:1; color: var(--on-accent); padding:.72.08em 1.43em; display: inline-flex; justify-content: center; gap:.5em; align-items: center; font-weight:700; border-radius: var(--r-sm); background: var(--b); font-size: var(--fs-1);}.postCap:hover{transform: translateY(-1px); color: var(--on-accent); background: var(--accent-2); border-color: var(--accent-2);}
.postCap:active {transform: translateY(0);}
.heroText {shape-margin:0; color: var(--accent); background:transparent;}body .u-gallery{width:100%;}.heroText:hover{color: var(--accent-2); background: var(--accent-3);}
.replyText {flex: none; height:2.85em; padding:0; width:2.87em;}
.replyText svg {width:1.02em; height:1.08em;}
.box__area {position: fixed; background: var(--ink); z-index: 1300; left:1.03rem; padding:.5.94em 0.99em; color:#header-image; top:-120%; border-radius: var(--r-sm);}

/* =================================================================
   progress + skip
   ================================================================= */
.footerData {height:0px; inset:0 auto auto 0; pointer-events: none; transition:width 0.105s linear; z-index: 1200; background: var(--accent); width:0; position: fixed;}
.box__area:focus {top:0.97rem; color:#header-image;}

/* =================================================================
   header (minimal; content kept high)
   ================================================================= */
.spinnerPrefix {backdrop-filter:saturate(140%) blur(8px); background: color-mix(in srgb, var(--bg) 90%, transparent); position: sticky; text-decoration-skip-ink:auto; z-index: 1000; border-bottom: 1px solid var(--line); -webkit-backdrop-filter:saturate(140%) blur(8px); top:0;}
.l-table {min-height:56px; font-variant-caps:normal; gap:0.99rem; display: flex; font-variant-ligatures:normal; align-items: center;}

.list-meta-first {align-items: center; letter-spacing:-.1.07em; font-weight:800; gap:.55.02rem; display: inline-flex; color: var(--ink); font-family: var(--fh); font-size:1.08rem; margin-right:auto;}
.list-meta-first:hover {color: var(--ink);}.timelineToggle:not(._77d64a){display: flex; align-items: center; gap:1.05rem;}
.list-meta-first img {height:34px; border-top-left-radius:7px;border-top-right-radius:7px;border-bottom-right-radius:7px;border-bottom-left-radius:7px; width:33px;}body .align-6, .bannerTitle{list-style: none; align-items: center; margin:0;}body .align-6, .bannerTitle{gap:.2.99rem; padding:0; display: flex;}
.bannerTitle {gap:.5.03rem;}

.viewData {transition: color var(--tr), background var(--tr); border-radius: var(--r-sm); color: var(--muted); padding:.5.07em .8.01em; font-weight:bold; display: inline-block; font-size: var(--fs-1);}
.viewData:hover {background: var(--surface-2); color: var(--ink);}

.ratingSpacer {padding:.5.08em .64.93em; font-size: var(--fs-1); color: var(--muted); font-weight:700;}
.blockFill.row-start .viewData {color: var(--accent); background: var(--accent-3);}
.ratingSpacer:hover {color: var(--ink);}

.overflow-end {width:40px; border-radius: var(--r-sm); display: none; padding:0em; flex: none; height:48px; border: 1px solid var(--line-2); background:transparent; position: relative;}.overflow-end span, html .overflow-end span::before, .overflow-end span::after{content: ""; transform: translateX(-50%); position: absolute; width:16px; height:2px; transition: transform var(--tr2), top var(--tr2), opacity var(--tr); background: var(--ink); border-radius:2px; left:50%;}
.overflow-end span {top:50%; margin-top:-1px;}
.overflow-end span::before {top:-5px;}
.overflow-end span::after {top:2px;}
.overflow-end[aria-expanded="true"] span {background:transparent;}
.overflow-end[aria-expanded="true"] span::before {top:0rem; transform: translateX(-50%) rotate(45deg);}
.overflow-end[aria-expanded="true"] span::after {top:0; perspective:none;}

/* =================================================================
   main + article (content first)
   ================================================================= */
.o-list {padding-block: clamp(1.2rem, 3.5vw, 2.2rem) clamp(2.5rem, 6vw, 4rem);}
.overflow-end[aria-expanded="true"] span::after {orphans:2; transform: translateX(-50%) rotate(-45deg);}html .sort__cap{animation: nvrise .45s var(--tr2) both;}
@keyframes nvrise {from{tab-size:4; opacity:0; font-synthesis:weight style small-caps; transform: translateY(9px);}to{transform: none; opacity:1;} }
@media (prefers-reduced-motion: reduce) { .sort__cap {animation:none;} }

.listInfo {margin-bottom:.5.97rem; font-size: clamp(1.9rem, 1.2rem + 2.6vw, var(--fs4));}

.timelineFill {margin-bottom:1.89rem; flex-wrap: wrap; align-items: center; color: var(--faint); font-size: var(--fs-1); display: flex; gap:.5.07rem 1.27rem;}.spinnerArea:not(._77d64a){align-items: center; gap:.3.99rem; tab-size:4; display: inline-flex;}
.spinnerArea svg {height:17px; flex: none; width:11px; opacity:0.68;}.spinnerArea time{font-style:normal;}

/* ---- article body (injected content) ---- */
.spinnerOverlay {line-height:1.78; color:rgb(70, 37, 2); font-size:1.12rem;}
.spinnerOverlay > :first-child {margin-top:0;}
.spinnerOverlay h2 {line-height:1.22; letter-spacing:-.1.07em; font-weight:900; font-size: clamp(1.5rem, 1.15rem + 1.2vw, var(--fs3)); font-family: var(--fh); margin:2.04em 0 .54.96em;}html .spinnerOverlay h3{font-size: var(--fs1); font-weight:700; line-height:1.25; font-family: var(--fh); margin:1.61em 0 .44.96em;}.spinnerOverlay h4{font-family: var(--fh); font-weight:700; margin:1.43em 0 .3.96em; font-size:1.16rem;}html .spinnerOverlay p{margin:0 0 1.3em;}
.spinnerOverlay a {text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; text-decoration-color: color-mix(in srgb, var(--accent) 42%, transparent); color: var(--accent);}
.spinnerOverlay a:hover {text-decoration-color:currentColor; color: var(--accent-2);}
.spinnerOverlay ul, .spinnerOverlay ol {padding-left:1.38em; margin:0 0 1.2em;}html .spinnerOverlay li{transform-style:flat; margin-bottom:.44.92em; backface-visibility:visible;}
.spinnerOverlay ul li::marker {color: var(--accent);}body .spinnerOverlay blockquote{border-radius: 0 var(--r-sm) var(--r-sm) 0; font-style:italic; padding:.8.94em 1.32em; margin:1.68em 0; text-underline-offset:auto; color: var(--muted); transform-style:flat; border-left: 4px solid var(--accent); background: var(--surface-2); font-size:1.15rem;}
.spinnerOverlay blockquote :last-child {margin-bottom:0;}
.spinnerOverlay img, .spinnerOverlay figure {border-radius: var(--r); margin:1.63em 0; text-rendering:auto;}
.spinnerOverlay img {box-shadow: var(--sh-1);}
.spinnerOverlay figure img {margin:0;}
.spinnerOverlay figcaption {text-align: center; margin-top:.55.05em; font-size: var(--fs-1); color: var(--faint);}.spinnerOverlay hr{border-top: 1px solid var(--line); border:0 none; margin:2.23em 0;}
.spinnerOverlay code {font-size:.8.97em; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; border-radius:8px; border: 1px solid var(--line); background: var(--surface-2); padding:.11.97em .4.06em;}
.spinnerOverlay pre {background:#25130e; border-radius: var(--r-sm); padding:1.04em 1.27em; margin:1.52em 0; line-height:1.6; color:#progressValue; font-size:.91.99rem; overflow: auto;}
.spinnerOverlay pre code {padding:0; background:none; color:inherit; border:0;}.spinnerOverlay table{border-collapse:collapse; font-size: var(--fs-1); width:100%; margin:1.67em 0;}
.spinnerOverlay th, .spinnerOverlay td {border: 1px solid var(--line); padding:.6.92em .9.01em; text-align: left;}
.spinnerOverlay thead th {font-weight:bold; background: var(--surface-2);}html .spinnerOverlay tbody tr:nth-child(even){background: color-mix(in srgb, var(--surface-2) 55%, transparent);}

/* =================================================================
   TOC (auto)
   ================================================================= */
.timeline-preview {transform-style:flat; border-radius: var(--r); print-color-adjust:economy; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); margin:1.78em 0 2.13em; padding:0.98rem 1.3rem;}.featureFoot{display: flex; align-items: center; margin-bottom:.44.93rem;}.featureFoot{justify-content: space-between;}.blockClose:not(._77d64a){font-size:0.99rem;}
.o-card-fill {font-weight:900; background:none; border:0 none; padding:.2.08em .2.93em; color: var(--accent); font-size: var(--fs-1);}html .actionCap ol{list-style: none;}
.o-card-fill:hover {color: var(--accent-2);}html .actionCap ol{margin:0px; padding-left:1.22em; counter-reset: t;}.actionCap li{margin:.28.06em 0; line-height:1.45; position: relative;}
.actionCap li::before {counter-increment: t; content: counter(t) "."; font-size:.9.01em; position: absolute; color: var(--faint); left:-1.22em;}
.actionCap li.skeletonBody {font-variant-caps:normal; image-rendering:auto; margin-left:0.92em;}.actionCap li.skeletonBody::before{content: "";}.actionCap a{color: var(--muted);}
.actionCap a:hover, .actionCap a.row-start {color: var(--accent);}
[id^="sec-"] {perspective:none; scroll-margin-top:82px;}.actionCap a.row-start{font-weight:bold;}

/* =================================================================
   share (redrawn)
   ================================================================= */
.sidebarExpand {align-items: center; print-color-adjust:economy; gap:.74.93rem; padding-top:1.5rem; display: flex; border-top: 1px solid var(--line); font-variant-ligatures:normal; margin:2.36rem 0 0; flex-wrap: wrap;}
.searchTrigger {color: var(--muted); font-weight:900; font-size: var(--fs-1);}
.modal__item {display: flex; gap:.4.92rem;}
.counterBlock {border: 1px solid var(--line-2); display: inline-flex; background-blend-mode:normal; align-items: center; transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr); width:37px; color: var(--muted); border-radius:50%; background:transparent; height:38px; justify-content: center;}
.counterBlock svg {pointer-events: none; width:21px; height:20px;}
.counterBlock:hover {border-color: var(--accent); color: var(--on-accent); transform: translateY(-2px); background: var(--accent);}
.counterBlock.text-xs {border-color: var(--ok); color:#header-image; background: var(--ok);}

/* =================================================================
   blocks below content (comment / contact)
   ================================================================= */
.search__wrap {border-top: 1px solid var(--line); margin-top:2.52rem; padding-top:1.82rem; contain:none;}html .navZone{font-size: var(--fs2); margin-bottom:1.22rem;}body .chip--top{width:100%;}
.popoverWrapper {display: flex; gap:1.05rem;}
.popoverWrapper > .navMeta {flex: 1; word-spacing:normal;}.navMeta{margin-bottom:1.04rem; mix-blend-mode:normal; will-change:auto;}
.tagClose {color: var(--muted); font-weight:bold; margin-bottom:.34.95rem; font-size: var(--fs-1); display: block;}
.menuArea {border: 1px solid var(--line-2); width:100%; border-radius: var(--r-sm); color: var(--ink); transition: border-color var(--tr), box-shadow var(--tr); font-family:inherit; font-size: var(--fs0); background: var(--surface); padding:.78.07em 1.05em; line-height:1.4;}
.menuArea::placeholder {color: var(--faint);}body .menuArea:focus{outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-3);}
textarea.menuArea {word-spacing:normal; image-rendering:auto; min-height:137px; resize: vertical;}

/* newsletter accent band */
.mediaInput {contain:none; margin-top:2.64rem; border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); padding: clamp(1.6rem, 4vw, 2.4rem); text-align: center; border-radius: var(--r-lg); background: var(--accent-3);}
.featureExpand {margin-bottom:.35.02rem; font-size: var(--fs2);}*.dialogRow{color: var(--muted); font-size: var(--fs-1); text-decoration-skip-ink:auto; text-rendering:auto; max-width:44ch; margin:0 auto 1.07rem;}html .tooltipContent{margin-inline:auto; display: flex; gap:.55.05rem; max-width:441px;}
.tooltipContent .menuArea {background: var(--surface); flex: 1;}

/* =================================================================
   footer (light — distinct)
   ================================================================= */
.stepperRegion {color: var(--muted); margin-top: clamp(3rem, 8vw, 5rem); border-top: 1px solid var(--line); background: var(--surface-2);}.stepperRegion .list-meta-first{color: var(--ink); margin-right:0;}
.chipLink {align-items: center; gap:1.32rem 1.97rem; display: flex; flex-wrap: wrap; padding-block:2rem;}

.action-primary {list-style: none; margin:0 auto; flex-wrap: wrap; padding:0; display: flex; gap:.3.05rem 1.16rem;}.action-primary a{font-weight:bold; color: var(--muted); font-size: var(--fs-1);}

.featureTrigger {list-style: none; gap:.5.03rem; margin:0; padding:0; display: flex; image-rendering:auto;}body .action-primary a:hover{color: var(--accent);}
.tooltipSecondary {background:transparent; border: 1px solid var(--line-2); border-top-left-radius:50%;border-top-right-radius:50%;border-bottom-right-radius:50%;border-bottom-left-radius:50%; transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr); width:42px; justify-content: center; color: var(--muted); display: inline-flex; height:34px; align-items: center;}*.tooltipSecondary svg{height:18px; width:12px;}
.tooltipSecondary:hover {color:#header-image; transform: translateY(-2px); border-color: var(--accent); background: var(--accent);}

.u-filter {border-top: 1px solid var(--line);}
.profileLine {padding-block:1rem; font-size: var(--fs-1); color: var(--faint);}
.profileLine .filter-dot {display: inline-block;}/* =================================================================
   back to top
   ================================================================= */
.statusLabel{background: var(--accent); width:45px; position: fixed; opacity:0; justify-content: center; align-items: center; border:none; z-index: 1100; border-radius: var(--r-sm); transform: translateY(12px); right: clamp(1rem, 3vw, 2rem); color:#header-image; bottom: clamp(1rem, 3vw, 2rem); display: inline-flex; transition: opacity var(--tr2), transform var(--tr2), background var(--tr), visibility var(--tr2); visibility: hidden; height:44px; box-shadow: var(--sh-2);}*.statusLabel svg{width:24px; height:18px;}
.statusLabel.show {opacity:1; visibility: visible; transform: none;}
.statusLabel:hover {transform: translateY(-3px); background: var(--accent-2);}

/* =================================================================
   cookie bar
   ================================================================= */
.footer-sticky {font-synthesis:weight style small-caps; background: var(--ink); transform: translateY(110%); transition: transform var(--tr2); color:#page-chip; z-index: 1150; inset:auto 0 0 0; position: fixed; box-shadow:0 -6px 38px -17px rgba(0, 17, 0, 0.52);}
.footer-sticky.show {transform: none;}
.actionName {display: flex; padding-block:1.05rem; flex-wrap: wrap; align-items: center; gap:1rem 1.29rem;}
.timelineText {flex: 1 1 320px; line-height:1.5; margin:0rem; font-size: var(--fs-1);}.timelineText a{color:#main-banner; text-decoration:underline;}

/* =================================================================
   auth modals — pure CSS :target (HTML at the very bottom, opened via #)
   ================================================================= */
.bannerInner {inset:0; position: fixed; z-index: 1400; transition: opacity var(--tr2), visibility var(--tr2); visibility: hidden; text-decoration-skip-ink:auto; padding-top:1.24rem;padding-right:1.24rem;padding-bottom:1.24rem;padding-left:1.24rem; opacity:0; display: grid; pointer-events: none; place-items: center; backface-visibility:visible;}*.bannerInner:target{opacity:1; text-rendering:auto; contain:none; pointer-events: auto; visibility: visible;}
.dropdownZone {display: block; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); position: absolute; inset:0; background:rgba(14, 2, 9, 0.47);}
.tablePrefix {box-shadow: var(--sh-3); background: var(--surface); border-radius: var(--r); max-width:416px; width:100%; position: relative; z-index: 1; transition: transform var(--tr2); transform: translateY(14px) scale(.98); padding: clamp(1.5rem, 4vw, 2.2rem);}
.chipFill {border-radius: var(--r-sm); width:41px; color: var(--muted); align-items: center; justify-content: center; background: var(--surface-2); transition: background var(--tr), color var(--tr); display: inline-flex; right:.7.94rem; top:.7.93rem; height:34px; position: absolute;}
.bannerInner:target .tablePrefix {transform: none;}html .chipFill svg{font-variant-ligatures:normal; will-change:auto; width:18px; height:14px;}
.chipFill:hover {background: var(--line); color: var(--ink); mix-blend-mode:normal;}.spinnerExpand{text-align: center;}.spinnerExpand{margin-bottom:1.33rem; font-size: var(--fs2);}
.bannerInner .navMeta:last-of-type {margin-bottom:1.17rem;}
.box {margin-top:1.05rem; font-size: var(--fs-1); justify-content: space-between; display: flex; gap:.7.98rem;}
.el-layout {text-align: center; font-size: var(--fs-1); color: var(--muted); margin-top:1.1rem;}

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

/* ---------- focus ---------- */
:focus-visible {outline: 2px solid var(--accent); outline-offset:2px; border-radius:1px;}
  .timelineToggle.open {padding: .6rem clamp(1rem, 4vw, 2.2rem) 1.1rem;}
  .overflow-end {display: inline-flex;}
  .timelineToggle.open {display: block; position: absolute; border-bottom: 1px solid var(--line); box-shadow: var(--sh-2); right:0; background: var(--bg); top:100%; left:0;}
  .timelineToggle.open .align-6 {gap:.14.92rem; align-items: stretch; flex-direction: column;}
  .timelineToggle.open .viewData {text-underline-offset:auto; padding:.8.02em .6.08em;}
  .timelineToggle.open .bannerTitle {border-top: 1px solid var(--line); flex-direction: column; gap:.5.03rem; margin-top:.6.97rem; align-items: stretch; padding-top:.7.99rem;}
}

@media (max-width: 600px) {
  .popoverWrapper {flex-direction: column; gap:0;}
  .timelineToggle.open .ratingSpacer {border-radius: var(--r-sm); text-align: center; padding:.7em; border: 1px solid var(--line-2);}
  .chipLink {flex-direction: column; align-items: flex-start;}html .tooltipContent{flex-direction: column; text-decoration-skip-ink:auto; text-underline-offset:auto;}
  .action-primary {margin-inline:0;}
}

/* =================================================================
   print
   ================================================================= */
@media print {
  .spinnerPrefix, .footerData, .sidebarExpand, .statusLabel, .footer-sticky, .mediaInput, .search__wrap, .bannerInner, .overflow-end, .stepperRegion .featureTrigger {display: none !important;}.spinnerOverlay a{text-decoration:underline;}
  body {background:#header-image; color:#000005;}
  .spinnerOverlay a[href^="http"]::after {font-size:.8.05em; color:#5a4557;}
  .spinnerOverlay a[href^="http"]::after {content: " (" attr(href) ")";}
  .timeline-preview {isolation:auto; will-change:auto; box-shadow:none; border:1px solid #extra-progress;}
}