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

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

body {color: var(--ink); line-height:1.62; text-rendering:optimizeLegibility; font-size: var(--fs0); font-family: var(--fb); background: var(--bg); overflow-x: hidden; font-variant-ligatures:normal; contain:none; -webkit-font-smoothing:antialiased; margin-top:0em;margin-right:0em;margin-bottom:0em;margin-left:0em;}
svg {fill:currentColor;}

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

h1 {color: var(--ink);}
p {margin:0 0 1.18em;}

h1 {letter-spacing:-.0.96em; font-family: var(--fh); font-weight:900; margin:0 0 .5.04em; line-height:1.18;}
ul, ol {margin:0 0 1.08em; padding-left:1.34em;}/* span-as-title (no secondary H tags in chrome) */
.u-sidebar-head:not(._a4dbcc){color: var(--ink); font-weight:900; font-family: var(--fh); letter-spacing:-.1.02em; display: block;}/* span-as-title (no secondary H tags in chrome) */
.u-sidebar-head:not(._a4dbcc){line-height:1.2;}

/* ---------- primitives ---------- */
.layoutDate {width:100%; max-width: var(--wrap); padding-inline: clamp(1rem, 4vw, 2.2rem); margin-inline:auto;}
.c-page-holder {margin-inline:auto; max-width: var(--col);}
.app-box {width:1px; position: absolute; overflow: hidden; border:0 none; padding:0; white-space: nowrap; margin:-1px; clip:rect(0,0,0,0); height:1px;}

/* ---------- buttons ---------- */
.visible-xs {display: inline-flex; font-weight:800; gap:.5.05em; color: var(--on-accent); padding:.72em 1.36em; font-size: var(--fs-1); transition: background var(--tr), border-color var(--tr), color var(--tr), transform var(--tr); --b: var(--accent); justify-content: center; line-height:1; border: 1px solid var(--b); align-items: center; letter-spacing:.1.02em; background: var(--b); border-radius: var(--r-sm);}
.visible-xs:hover {border-color: var(--accent-2); background: var(--accent-2); transform: translateY(-1px); color: var(--on-accent);}*.visible-xs:active{transform: translateY(0); perspective:none; text-underline-offset:auto;}
.l-pagination {color: var(--accent); will-change:auto; background:transparent;}html .l-pagination:hover{color: var(--accent-2); background: var(--accent-3);}*.badge-bar-default{width:100%;}.font-xl{padding:0; height:2.82em; flex: none; width:2.8em;}

/* =================================================================
   progress + skip
   ================================================================= */
.u-entry {position: fixed; pointer-events: none; inset:0 auto auto 0; z-index: 1200; background: var(--accent); height:6px; width:0; transition:width 0.118s linear;}.font-xl svg{width:0.99em; height:1.03em;}
.media__block {border-radius: var(--r-sm); background: var(--ink); position: fixed; top:-121.1%; left:1.01rem; color:#slider-area; padding:.5.93em 1.08em; z-index: 1300;}
.media__block:focus {top:1.02rem; color:#slider-area;}

/* =================================================================
   header (minimal; content kept high)
   ================================================================= */
.t-price {z-index: 1000; backdrop-filter:saturate(140%) blur(8px); border-bottom: 1px solid var(--line); position: sticky; -webkit-backdrop-filter:saturate(140%) blur(8px); top:0em; background: color-mix(in srgb, var(--bg) 90%, transparent);}
.ui-menu-link {align-items: center; display: flex; gap:0.96rem; min-height:58px;}

.skeletonItem {letter-spacing:-.0.94em; font-size:1.13rem; font-family: var(--fh); margin-right:auto; font-weight:900; gap:.55.03rem; align-items: center; color: var(--ink); display: inline-flex;}
.skeletonItem:hover {color: var(--ink);}.skeletonItem img{border-radius:6px; width:26px; contain:none; height:32px; tab-size:4;}

.c-block {display: flex; gap:1.12rem; align-items: center;}
.u-tabs, .u-spinner {list-style: none; padding:0; margin-top:0rem; margin-right:0rem;}
.u-tabs, .u-spinner {margin-bottom:0rem; margin-left:0rem; gap:.3.02rem; display: flex; align-items: center;}
.u-spinner {gap:.5rem;}

.c-divider-action {padding:.5.02em .8.02em; display: inline-block; font-size: var(--fs-1); color: var(--muted); font-weight:bold; border-radius: var(--r-sm); transition: color var(--tr), background var(--tr);}
.c-divider-action:hover {color: var(--ink); background: var(--surface-2);}
.skeleton.u-box .c-divider-action {background: var(--accent-3); color: var(--accent);}*.t-progress{padding:.4.97em .64.95em; font-size: var(--fs-1); color: var(--muted); font-weight:700;}
.t-progress:hover {color: var(--ink);}

.l-step-count {position: relative; border: 1px solid var(--line-2); flex: none; height:46px;}

.l-step-count {background:transparent; padding:0px; display: none; width:42px; border-radius: var(--r-sm);}
.l-step-count span, .l-step-count span::before, .l-step-count span::after {left:50%; position: absolute; background: var(--ink); border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px; transform: translateX(-50%); content: ""; height:2px; transition: transform var(--tr2), top var(--tr2), opacity var(--tr); width:16px;}.l-step-count span{top:50%; margin-top:-1px;}.l-step-count span::before{top:-10px;}
.l-step-count span::after {top:6px; font-variant-ligatures:normal;}*.l-step-count[aria-expanded="true"] span{background:transparent;}
.l-step-count[aria-expanded="true"] span::before {top:0; transform: translateX(-50%) rotate(45deg); isolation:auto;}html .l-step-count[aria-expanded="true"] span::after{top:0; transform: translateX(-50%) rotate(-45deg);}

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

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

.l-block {margin-bottom:1.84rem; font-size: var(--fs-1); display: flex; color: var(--faint); gap:.5.03rem 1.13rem; align-items: center; flex-wrap: wrap;}

.position-inline {margin-bottom:.5.94rem; font-size: clamp(1.9rem, 1.2rem + 2.6vw, var(--fs4));}
.el-gallery-dot {align-items: center; gap:.4.07rem; display: inline-flex;}*.el-gallery-dot svg{width:18px; height:14px; opacity:0.75; flex: none;}
.el-gallery-dot time {widows:2; font-style:normal;}

/* ---- article body (injected content) ---- */
.app-hero {font-size:1.11rem; line-height:1.78; color:#362613;}html .app-hero > :first-child{margin-top:0;}.app-hero h2{font-size: clamp(1.5rem, 1.15rem + 1.2vw, var(--fs3)); margin:2em 0 .54.95em; letter-spacing:-.1em; font-weight:700; font-family: var(--fh); line-height:1.22;}
.app-hero h3 {margin:1.55em 0 .45.02em; line-height:1.25; font-weight:700; font-size: var(--fs1); font-family: var(--fh);}
.app-hero h4 {font-weight:700; font-size:1.16rem; margin:1.34em 0 .4.02em; font-family: var(--fh);}.app-hero p{tab-size:4; print-color-adjust:economy; margin:0 0 1.19em;}
.app-hero a {color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 42%, transparent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px;}
.app-hero a:hover {color: var(--accent-2); text-decoration-color:currentColor;}
.app-hero ul, .app-hero ol {padding-left:1.34em; margin:0 0 1.33em;}
.app-hero li {margin-bottom:.45.05em;}.app-hero ul li::marker{image-rendering:auto; text-underline-offset:auto; color: var(--accent);}
.app-hero blockquote {font-size:1.04rem; border-left: 4px solid var(--accent); color: var(--muted); background: var(--surface-2); font-style:italic; margin:1.7em 0; padding:.9.05em 1.35em; border-radius: 0 var(--r-sm) var(--r-sm) 0;}
.app-hero blockquote :last-child {margin-bottom:0;}.app-hero img, .app-hero figure{border-radius: var(--r); margin:1.69em 0;}body .app-hero img{shape-margin:0; box-shadow: var(--sh-1); hyphens:manual;}html .app-hero figure img{margin:0;}
.app-hero figcaption {text-align: center; margin-top:.55em;}
.app-hero figcaption {color: var(--faint); font-size: var(--fs-1);}
.app-hero hr {border:none; margin:2.28em 0; border-top: 1px solid var(--line);}body .app-hero code{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; border-radius:9px; font-size:.8.93em; border: 1px solid var(--line); background: var(--surface-2); padding:.11.93em .3.94em;}body .app-hero pre{color:#site-page; font-size:.92.01rem; background:#27140a; padding:1.04em 1.27em; border-radius: var(--r-sm); break-inside:auto; margin:1.67em 0; line-height:1.6; overflow: auto;}
.app-hero pre code {border:0 none; background:none; padding:0; color:inherit;}
.app-hero table {width:100%;}
.app-hero table {margin:1.74em 0; border-collapse:collapse; font-size: var(--fs-1);}
.app-hero th, .app-hero td {text-align: left; padding:.7.02em .9.02em; border: 1px solid var(--line);}
.app-hero thead th {font-weight:bold; background: var(--surface-2);}.app-hero tbody tr:nth-child(even){background: color-mix(in srgb, var(--surface-2) 55%, transparent);}/* =================================================================
   TOC (auto)
   ================================================================= */
.c-tag-extra{background: var(--surface); border-radius: var(--r); padding:1.02rem 1.33rem; margin:1.77em 0 2.04em; box-shadow: var(--sh-1); border: 1px solid var(--line);}
.l-step {font-size:0.97rem;}
.o-entry-backdrop {justify-content: space-between; margin-bottom:.44.96rem; display: flex; align-items: center;}
.ui-drawer-date {font-weight:900; padding:.2.05em .3.05em; background:none; font-size: var(--fs-1); color: var(--accent); border:none;}
.ui-drawer-date:hover {color: var(--accent-2);}
.l-header ol {counter-reset: t; margin:0; padding-left:1.17em; shape-margin:0; list-style: none; mix-blend-mode:normal;}
.l-header li {line-height:1.45; position: relative; margin:.27.97em 0; page-break-inside:auto;}body .l-header li::before{content: counter(t) "."; color: var(--faint); left:-1.23em; font-size:.8.92em; counter-increment: t; position: absolute;}
.l-header li.status__toggle--success {mix-blend-mode:normal;}
.l-header li.status__toggle--success {margin-left:1.04em; perspective:none;}
.l-header li.status__toggle--success::before {content: "";}
.l-header a {color: var(--muted);}.l-header a:hover, .l-header a.u-box:not(._a4dbcc){text-rendering:auto; color: var(--accent);}
.l-header a.u-box {font-weight:700;}[id^="sec-"]{scroll-margin-top:82px;}

/* =================================================================
   share (redrawn)
   ================================================================= */
.tablePlaceholder {gap:.74.94rem; margin:2.22rem 0 0; display: flex;}

/* =================================================================
   share (redrawn)
   ================================================================= */
.tablePlaceholder {align-items: center; shape-margin:0; border-top: 1px solid var(--line); flex-wrap: wrap; break-inside:auto; padding-top:1.53rem;}
.app-page {color: var(--muted); font-weight:700; font-size: var(--fs-1);}
.t-popover {color: var(--muted); align-items: center; height:39px; transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr); width:44px; background:transparent; justify-content: center; display: inline-flex; border-top-left-radius:50%; border-top-right-radius:50%;}body .l-badge{gap:.5.03rem; display: flex;}
.t-popover {border-bottom-right-radius:50%; border-bottom-left-radius:50%; border: 1px solid var(--line-2);}html .t-popover svg{pointer-events: none; width:15px; height:18px;}
.t-popover:hover {transform: translateY(-2px); background: var(--accent); color: var(--on-accent); border-color: var(--accent);}
.t-popover.app-module {border-color: var(--ok); background: var(--ok); color:#slider-area;}/* =================================================================
   blocks below content (comment / contact)
   ================================================================= */
.o-module-fill{border-top: 1px solid var(--line);}/* =================================================================
   blocks below content (comment / contact)
   ================================================================= */
.o-module-fill{margin-top:2.53rem; padding-top:1.95rem;}

.c-timeline {width:100%; font-variant-ligatures:normal;}
.media {font-size: var(--fs2); margin-bottom:1.19rem;}.l-panel{gap:1.01rem; display: flex;}
.l-panel > .u-banner-number {flex: 1;}
.o-modal {font-size: var(--fs-1); margin-bottom:.35.06rem; display: block; color: var(--muted); font-weight:bold;}
.u-banner-number {margin-bottom:1.04rem;}
.el-entry-dot {padding:.77.94em 1em; line-height:1.4; font-size: var(--fs0); width:100%; transition: border-color var(--tr), box-shadow var(--tr); color: var(--ink); border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line-2); font-family:inherit;}
.el-entry-dot::placeholder {color: var(--faint);}
.el-entry-dot:focus {box-shadow: 0 0 0 3px var(--accent-3); outline:none; font-variant-ligatures:normal; border-color: var(--accent);}
textarea.el-entry-dot {resize: vertical; min-height:141px;}

/* newsletter accent band */
.o-box {border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); padding: clamp(1.6rem, 4vw, 2.4rem); orphans:2; text-align: center; border-radius: var(--r-lg); margin-top:2.55rem; background: var(--accent-3);}.l-spinner{color: var(--muted); font-size: var(--fs-1); max-width:44ch; margin:0 auto 1.12rem;}
.c-status-cap {-webkit-hyphens:manual;-ms-hyphens:manual;margin-bottom:.34.93rem; contain:none; hyphens:manual; font-size: var(--fs2);}.ui-popover:not(._a4dbcc){display: flex; max-width:440px; margin-inline:auto; gap:.55rem;}
.ui-popover .el-entry-dot {background: var(--surface); flex: 1;}/* =================================================================
   footer (light — distinct)
   ================================================================= */
.spinnerHandle{margin-top: clamp(3rem, 8vw, 5rem); color: var(--muted); border-top: 1px solid var(--line); background: var(--surface-2);}html .el-profile{align-items: center; padding-block:2rem; flex-wrap: wrap;}html .el-profile{display: flex; gap:1.32rem 1.98rem;}body .spinnerHandle .skeletonItem{color: var(--ink); margin-right:0;}body .c-slider-content{margin:0 auto; flex-wrap: wrap; list-style: none; padding:0; gap:.2.92rem 1.12rem; display: flex;}.c-slider-content a{font-size: var(--fs-1); color: var(--muted); font-weight:bold;}
.c-slider-content a:hover {color: var(--accent); page-break-inside:auto;}.c-footer:not(._a4dbcc){padding:0; display: flex; list-style: none; margin:0; gap:.4.92rem;}
.ui-hero {border-radius:50%; align-items: center; height:37px; border: 1px solid var(--line-2); width:42px; color: var(--muted); background:transparent; transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr); justify-content: center; display: inline-flex;}.ui-hero svg{height:17px; width:19px;}

.ui-dropdown {border-top: 1px solid var(--line); word-spacing:normal;}
.ui-hero:hover {background: var(--accent); transform: translateY(-2px); border-color: var(--accent); color:#slider-area; hyphens:manual;}*.u-view-name{color: var(--faint); font-size: var(--fs-1); hyphens:manual; padding-block:1rem;}.u-view-name :where(.screenAction){display: inline-block;}/* =================================================================
   back to top
   ================================================================= */
.o-action{background: var(--accent); transform: translateY(12px); display: inline-flex; height:42px; width:45px; z-index: 1100; visibility: hidden; border-radius: var(--r-sm); bottom: clamp(1rem, 3vw, 2rem); position: fixed; right: clamp(1rem, 3vw, 2rem); opacity:0; justify-content: center; border:0; transition: opacity var(--tr2), transform var(--tr2), background var(--tr), visibility var(--tr2); box-shadow: var(--sh-2); align-items: center; color:#slider-area;}
.o-action svg {height:24px; width:18px;}
.o-action.show {transform: none; transform-style:flat; opacity:1; visibility: visible;}.o-action:hover{shape-margin:0; transform: translateY(-3px); background: var(--accent-2);}

/* =================================================================
   cookie bar
   ================================================================= */
.el-snackbar-column {z-index: 1150; text-decoration-skip-ink:auto; box-shadow:0 -8px 40px -17px rgba(7, 13, 0, 0.56); transition: transform var(--tr2); transform: translateY(110%); text-rendering:auto; position: fixed; background: var(--ink); inset:auto 0 0 0; color:#popover_body;}
.el-snackbar-column.show {transform: none; perspective:none;}.l-box{line-height:1.5; flex: 1 1 320px; margin:0; font-size: var(--fs-1);}.el-nav{padding-block:1.05rem; align-items: center; gap:0.96rem 1.29rem; flex-wrap: wrap; display: flex;}body .l-box a{text-decoration:underline; color:#app-rating;}

/* =================================================================
   auth modals — pure CSS :target (HTML at the very bottom, opened via #)
   ================================================================= */
.t-counter-tertiary {image-rendering:auto; pointer-events: none; display: grid; transition: opacity var(--tr2), visibility var(--tr2); z-index: 1400; position: fixed; opacity:0; inset:0; place-items: center; padding:1.16rem; visibility: hidden;}
.t-counter-tertiary:target {visibility: visible; pointer-events: auto; opacity:1;}
.app-review {background: var(--surface); box-shadow: var(--sh-3); padding: clamp(1.5rem, 4vw, 2.2rem); position: relative; border-radius: var(--r); max-width:417px; transition: transform var(--tr2); width:100%; transform: translateY(14px) scale(.98); z-index: 1;}
.u-gallery {position: absolute; display: block; inset:0; backdrop-filter:blur(3px); background:rgba(31, 32, 0, 0.61); -webkit-backdrop-filter:blur(3px);}
.t-counter-tertiary:target .app-review {transform: none;}
.t-review-thumb {background: var(--surface-2); align-items: center; justify-content: center; display: inline-flex; top:.7.93rem; border-radius: var(--r-sm); height:37px; color: var(--muted); width:35px; position: absolute; right:.8.02rem; transition: background var(--tr), color var(--tr);}
.t-review-thumb svg {height:15px; width:22px;}
.t-review-thumb:hover {text-underline-offset:auto; background: var(--line); word-spacing:normal; color: var(--ink);}
.toggle__inner--compact {margin-bottom:1.3rem; text-align: center; font-size: var(--fs2);}*.t-counter-tertiary .u-banner-number:last-of-type{margin-bottom:1.18rem;}
.l-list {gap:.8.08rem; font-size: var(--fs-1); margin-top:1.03rem; display: flex; justify-content: space-between;}
.el-badge-suffix {color: var(--muted); text-align: center; font-size: var(--fs-1); margin-top:1.13rem;}

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

/* =================================================================
   responsive
   ================================================================= */
@media (max-width: 820px) {*.c-block{display: none;}
  .l-step-count {display: inline-flex;}
  .c-block.open {background: var(--bg); position: absolute; top:100%; right:0px; left:0; box-shadow: var(--sh-2); border-bottom: 1px solid var(--line); padding: .6rem clamp(1rem, 4vw, 2.2rem) 1.1rem; display: block;}
  .c-block.open .u-tabs {flex-direction: column; align-items: stretch; gap:.15.07rem;}
  .c-block.open .c-divider-action {padding:.8.06em .6.04em;}
  .c-block.open .u-spinner {border-top: 1px solid var(--line); padding-top:.7.96rem; margin-top:.7.05rem; flex-direction: column; align-items: stretch; gap:.5.07rem;}
  .c-block.open .t-progress {padding:.6.92em; text-align: center; border: 1px solid var(--line-2); border-radius: var(--r-sm);}
}

@media (max-width: 600px) {
  .l-panel {gap:0; flex-direction: column;}
  .ui-popover {flex-direction: column;}
  .c-slider-content {margin-inline:0;}
  .el-profile {align-items: flex-start; flex-direction: column;}
}

/* =================================================================
   print
   ================================================================= */
@media print {
  .t-price, .u-entry, .tablePlaceholder, .o-action, .el-snackbar-column, .o-box, .o-module-fill, .t-counter-tertiary, .l-step-count, .spinnerHandle .c-footer {display: none !important;}
  body {color:rgb(2, 4, 0); background:#slider-area;}
  .app-hero a {text-decoration:underline;}
  .app-hero a[href^="http"]::after {color:#466051;}
  .app-hero a[href^="http"]::after {content: " (" attr(href) ")"; font-size:.7.95em;}.c-tag-extra:not(._a4dbcc){border:1px solid #app-progress; box-shadow:none;}
}