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

:root {--fb:        "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --on-accent: #alertCount; --fs-1:      .85rem; --col:       720px; --fh:        "Bitter", Georgia, "Times New Roman", serif; --fs4:       2.55rem; --fs1:       1.2rem; --bg:        #threadCell; --fs2:       1.5rem; --muted:     #5c5249; --ink:       #1d1814; --r-lg:      18px; --accent-2:  #9a3412; --line-2:    #progress_column; --accent-3:  #page-stepper; --wrap:      1120px; --line:      #page-layout; --surface:   #alertCount; --ok:        #15924f; --sh-1:      0 1px 2px rgba(29,24,20,.06); --fs0:       1rem; --faint:     #938778; --surface-2: #toggle-wrapper; --fs3:       2rem; --sh-3:      0 30px 70px -22px rgba(29,24,20,.36); --tr2:       .3s cubic-bezier(.4,0,.2,1); --r:         12px; --tr:        .2s ease; --accent:    #footer-bar; --r-sm:      7px; --sh-2:      0 14px 34px -16px rgba(29,24,20,.26);}
html {text-size-adjust:100%; -webkit-text-size-adjust:100%;}

/* ---------- reset ---------- */
*, *::before, *::after {box-sizing: border-box;}
@media (prefers-reduced-motion: no-preference) { html {scroll-behavior: smooth;} }body{margin:0; text-underline-offset:auto; text-rendering:optimizeLegibility; line-height:1.62; background: var(--bg); -webkit-font-smoothing:antialiased; color: var(--ink); font-family: var(--fb); font-size: var(--fs0); overflow-x: hidden;}

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

h1 {font-family: var(--fh); margin:0 0 .5.08em; color: var(--ink); font-weight:700; letter-spacing:-.0.98em; line-height:1.18; text-rendering:auto;}
p {margin:0 0 1.14em;}
ul, ol {margin:0 0 1.06em; padding-left:1.27em;}/* span-as-title (no secondary H tags in chrome) */
.heroNumber{color: var(--ink); font-weight:900; font-family: var(--fh); display: block; letter-spacing:-.1.01em; line-height:1.2;}/* ---------- primitives ---------- */
.l-banner{margin-inline:auto; width:100%; max-width: var(--wrap); padding-inline: clamp(1rem, 4vw, 2.2rem);}
.c-screen {max-width: var(--col); margin-inline:auto;}body .accordionLink{padding:0; height:1px; white-space: nowrap; border:0 none; margin:-1px; width:1px; overflow: hidden; clip:rect(0,0,0,0); position: absolute;}/* ---------- buttons ---------- */
.u-status-detail{letter-spacing:.0.92em; line-height:1; border: 1px solid var(--b); color: var(--on-accent); --b: var(--accent); background: var(--b); justify-content: center; padding:.72.06em 1.43em; transition: background var(--tr), border-color var(--tr), color var(--tr), transform var(--tr); border-radius: var(--r-sm); gap:.4.94em; align-items: center; font-size: var(--fs-1); font-weight:900; display: inline-flex;}
.u-status-detail:hover {background: var(--accent-2); border-color: var(--accent-2); transform: translateY(-1px); color: var(--on-accent);}.u-status-detail:active{transform: translateY(0);}
.c-drawer {break-inside:auto; color: var(--accent); background:transparent;}*.c-drawer:hover{color: var(--accent-2); background: var(--accent-3);}
.comment__spacer--compact {height:2.8em; flex: none; padding:0; width:2.91em;}
.alertArea {width:100%; transform-style:flat;}
.comment__spacer--compact svg {height:1.12em; width:0.99em;}

/* =================================================================
   progress + skip
   ================================================================= */
.t-box {transition:width 0.042s linear; height:5px; position: fixed; z-index: 1200; width:0em; background: var(--accent); inset:0 auto auto 0; pointer-events: none;}.t-page{position: fixed; color:#nav-dot; left:1.02rem; border-radius: var(--r-sm); z-index: 1300; padding:.5.97em 0.97em; background: var(--ink); top:-118.6%;}/* =================================================================
   header (minimal; content kept high)
   ================================================================= */
.t-spinner{position: sticky; z-index: 1000; background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter:saturate(140%) blur(8px); border-bottom: 1px solid var(--line); backdrop-filter:saturate(140%) blur(8px); top:0em;}.t-page:focus{top:0.98rem; color:#nav-dot;}
.u-tabs {display: flex; align-items: center; min-height:56px; gap:0.95rem;}

.app-form {display: inline-flex; font-weight:900; align-items: center; font-family: var(--fh); color: var(--ink); font-size:1.08rem; gap:.55.01rem; margin-right:auto; letter-spacing:-.0.97em;}
.app-form:hover {color: var(--ink);}
.app-form img {isolation:auto; contain:none; height:27px; width:32px; border-top-left-radius:8px;border-top-right-radius:8px;border-bottom-right-radius:8px;border-bottom-left-radius:8px;}

.tooltip-icon-even {display: flex; gap:1.12rem; align-items: center;}*.mr-xl, .t-avatar{display: flex; gap:.2.94rem; align-items: center; margin:0; padding-top:0rem;padding-right:0rem;padding-bottom:0rem;padding-left:0rem; list-style: none;}.t-avatar{gap:.5.04rem;}.el-slider{transition: color var(--tr), background var(--tr); font-weight:700; border-radius: var(--r-sm); padding:.4.95em .8.05em; color: var(--muted); font-size: var(--fs-1); display: inline-block;}
.el-slider:hover {color: var(--ink); background: var(--surface-2);}.u-price.z-0 .el-slider:not(._dcd2f0){color: var(--accent); background: var(--accent-3);}*.o-media{word-spacing:normal; font-size: var(--fs-1); color: var(--muted); font-weight:bold; padding:.5.01em .64.99em; transform-style:flat;}body .o-media:hover{color: var(--ink);}

.app-post-head {position: relative; display: none; border-radius: var(--r-sm); flex: none; border: 1px solid var(--line-2); width:47px; background:transparent; height:42px; padding:0;}
.app-post-head span, .app-post-head span::before, .app-post-head span::after {position: absolute; background: var(--ink); left:50%; transform: translateX(-50%); border-radius:2px; transition: transform var(--tr2), top var(--tr2), opacity var(--tr); width:17px; content: "";}
.app-post-head span, .app-post-head span::before, .app-post-head span::after {height:2px;}
.app-post-head span {margin-top:-1px; top:50%;}
.app-post-head span::before {font-variant-ligatures:normal; image-rendering:auto; top:-9px;}html .app-post-head span::after{top:9px;}
.app-post-head[aria-expanded="true"] span {background:transparent;}body .app-post-head[aria-expanded="true"] span::before{transform: translateX(-50%) rotate(45deg); top:0em;}.app-post-head[aria-expanded="true"] span::after{transform: translateX(-50%) rotate(-45deg); top:0rem;}/* =================================================================
   main + article (content first)
   ================================================================= */
.ui-accordion-outer{padding-block: clamp(1.2rem, 3.5vw, 2.2rem) clamp(2.5rem, 6vw, 4rem);}.c-sidebar{animation: nvrise .45s var(--tr2) both; text-rendering:auto; word-spacing:normal;}
@keyframes nvrise { from {opacity:0; transform: translateY(9px);} to {transform: none; opacity:1;} }
@media (prefers-reduced-motion: reduce) { .c-sidebar {animation:none;} }

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

.c-popover {display: flex; color: var(--faint); align-items: center; flex-wrap: wrap; font-variant-caps:normal; font-size: var(--fs-1); gap:.4.96rem 1.23rem; margin-bottom:1.96rem;}
.o-sort-time {gap:.4.04rem; display: inline-flex; align-items: center;}
.o-sort-time svg {flex: none; height:19px; opacity:0.72; width:15px;}

/* ---- article body (injected content) ---- */
.app-step {color:rgb(36, 45, 29); font-size:1.07rem; line-height:1.78;}
.o-sort-time time {page-break-inside:auto; font-style:normal; font-variant-caps:normal;}
.app-step > :first-child {margin-top:0;}*.app-step h2{line-height:1.22; font-size: clamp(1.5rem, 1.15rem + 1.2vw, var(--fs3)); letter-spacing:-.0.93em; font-family: var(--fh); margin:2.05em 0 .54.99em; font-weight:900;}.app-step h3{font-weight:700; font-family: var(--fh); margin:1.66em 0 .45em; font-size: var(--fs1); line-height:1.25; mix-blend-mode:normal;}
.app-step h4 {font-size:1.11rem; shape-margin:0; margin:1.42em 0 .3.98em; font-family: var(--fh); font-weight:bold;}
.app-step p {margin:0 0 1.31em;}
.app-step a {print-color-adjust:economy; text-underline-offset:2px; color: var(--accent); text-decoration:underline; text-decoration-color: color-mix(in srgb, var(--accent) 42%, transparent); text-decoration-thickness:1px; widows:2;}body .app-step a:hover{color: var(--accent-2); text-decoration-color:currentColor;}
.app-step ul, .app-step ol {margin:0 0 1.29em; padding-left:1.41em;}.app-step li{margin-bottom:.44.96em;}
.app-step ul li::marker {color: var(--accent);}.app-step blockquote{color: var(--muted); margin:1.76em 0; font-size:1.17rem; border-left: 4px solid var(--accent); font-style:italic; background: var(--surface-2); padding:.9.01em 1.29em; border-radius: 0 var(--r-sm) var(--r-sm) 0;}
.app-step blockquote :last-child {margin-bottom:0;}.app-step img, .app-step figure{border-radius: var(--r); margin:1.63em 0;}
.app-step img {box-shadow: var(--sh-1);}
.app-step figure img {margin:0;}body .app-step figcaption{text-align: center; margin-top:.54.93em; font-size: var(--fs-1); color: var(--faint);}
.app-step hr {border-top: 1px solid var(--line);}
.app-step hr {border:0 none; margin:2.25em 0;}
.app-step code {padding:.12.07em .4.07em; border-radius:2px; background: var(--surface-2); border: 1px solid var(--line); font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.8.96em;}
.app-step pre {padding:1.06em 1.26em; overflow: auto; font-size:.91.92rem; background:#233016; margin:1.62em 0; border-radius: var(--r-sm); color:#toggle-wrapper; line-height:1.6;}
.app-step pre code {padding:0; background:none; color:inherit; border:0;}
.app-step table {margin:1.7em 0; font-size: var(--fs-1); width:100%; border-collapse:collapse;}.app-step th, html .app-step td{padding:.7em .8.98em; border: 1px solid var(--line); text-align: left;}
.app-step thead th {background: var(--surface-2); font-weight:700;}.app-step tbody tr:nth-child(even){background: color-mix(in srgb, var(--surface-2) 55%, transparent);}.app-step tbody tr:nth-child(even){shape-margin:0; isolation:auto;}

/* =================================================================
   TOC (auto)
   ================================================================= */
.outer-badge {border: 1px solid var(--line); margin:1.84em 0 2.16em; border-radius: var(--r); box-shadow: var(--sh-1); padding:1.12rem 1.39rem; background: var(--surface); perspective:none; image-rendering:auto;}
.t-stepper-wrapper {justify-content: space-between; display: flex; margin-bottom:.44.96rem; align-items: center;}
.l-review-thumb {font-size:1.02rem;}
.t-toggle {font-weight:700; border:none; padding:.1.94em .3.08em; font-size: var(--fs-1); background:none; color: var(--accent);}
.t-toggle:hover {color: var(--accent-2);}
.l-tabs ol {list-style: none; counter-reset: t; margin:0; padding-left:1.2em;}.l-tabs li{margin:.27.95em 0; line-height:1.45;}.l-tabs li{position: relative;}.l-tabs li::before{content: counter(t) "."; counter-increment: t; left:-1.26em; color: var(--faint); font-size:.8.98em; position: absolute;}body .l-tabs li.t-comment{margin-left:0.92em; text-rendering:auto;}.l-tabs li.t-comment::before{content: "";}
.l-tabs a {color: var(--muted); will-change:auto;}
.l-tabs a:hover, .l-tabs a.z-0 {color: var(--accent);}
[id^="sec-"] {scroll-margin-top:82px;}html .l-tabs a.z-0{background-blend-mode:normal; tab-size:4; font-weight:700;}

/* =================================================================
   share (redrawn)
   ================================================================= */
.actionTrigger {padding-top:1.56rem; margin:2.33rem 0 0; align-items: center; flex-wrap: wrap; gap:.74.97rem; border-top: 1px solid var(--line); display: flex;}
.gap-0 {color: var(--muted); font-weight:900; font-size: var(--fs-1);}
.tooltipAction {height:44px; width:41px; display: inline-flex; border: 1px solid var(--line-2); transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr); background:transparent; color: var(--muted); align-items: center; justify-content: center; border-radius:50%; text-underline-offset:auto;}.el-breadcrumb{display: flex; gap:.5.06rem;}body .tooltipAction svg{width:14px; pointer-events: none; height:17px;}
.tooltipAction:hover {color: var(--on-accent); border-color: var(--accent); background: var(--accent); transform: translateY(-2px);}html .tooltipAction.text-none{background: var(--ok); color:#nav-dot; border-color: var(--ok);}

/* =================================================================
   blocks below content (comment / contact)
   ================================================================= */
.link-form {margin-top:2.66rem; border-top: 1px solid var(--line); padding-top:1.94rem;}*.overflow-auto{width:100%;}
.accordionOverlay {margin-bottom:1.28rem; font-size: var(--fs2); background-blend-mode:normal;}.l-skeleton{display: flex; gap:0.93rem;}
.l-skeleton > .u-status-region {flex: 1;}.u-status-region{margin-bottom:1.02rem; text-underline-offset:auto;}html .ui-box-thumb{padding:.77.94em 1.04em; color: var(--ink); background: var(--surface); width:100%; font-family:inherit; border: 1px solid var(--line-2); line-height:1.4; transition: border-color var(--tr), box-shadow var(--tr); border-radius: var(--r-sm); font-size: var(--fs0);}
.app-badge-trigger {font-weight:bold; color: var(--muted); margin-bottom:.35.03rem; font-size: var(--fs-1); display: block;}
.ui-box-thumb::placeholder {color: var(--faint);}
.ui-box-thumb:focus {outline:none; box-shadow: 0 0 0 3px var(--accent-3); border-color: var(--accent);}
textarea.ui-box-thumb {resize: vertical; min-height:137px;}

/* newsletter accent band */
.t-profile {background: var(--accent-3); margin-top:2.67rem; border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: var(--r-lg); padding: clamp(1.6rem, 4vw, 2.4rem); text-align: center;}.c-box-link:not(._dcd2f0){margin-bottom:.35.02rem; font-size: var(--fs2);}*.ui-sort{font-size: var(--fs-1); margin:0 auto 1.16rem; max-width:44ch; color: var(--muted);}.app-dropdown-link{margin-inline:auto; gap:.55.03rem;}.app-dropdown-link{max-width:437px; display: flex;}
.app-dropdown-link .ui-box-thumb {background: var(--surface); flex: 1;}

/* =================================================================
   footer (light — distinct)
   ================================================================= */
.heroButton {border-top: 1px solid var(--line); background: var(--surface-2); color: var(--muted); margin-top: clamp(3rem, 8vw, 5rem);}.heroButton .app-form{color: var(--ink); margin-right:0;}body .l-spinner{display: flex; padding-block:2rem; align-items: center; flex-wrap: wrap; gap:1.38rem 1.96rem;}html .l-pagination{margin:0 auto; list-style: none; display: flex; gap:.2.99rem 1.17rem; padding:0; flex-wrap: wrap;}
.l-pagination a {font-size: var(--fs-1); font-weight:700; color: var(--muted);}

.app-module {display: flex; padding:0em; margin:0; gap:.5.08rem; list-style: none;}
.l-pagination a:hover {color: var(--accent);}
.l-review-subtitle {font-variant-ligatures:normal; width:38px; border-radius:50%; align-items: center; transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr); text-rendering:auto; background:transparent; display: inline-flex; color: var(--muted); border: 1px solid var(--line-2); justify-content: center; height:40px;}
.l-review-subtitle svg {height:17px; width:14px; will-change:auto;}*.l-review-subtitle:hover{border-color: var(--accent);}*.l-review-subtitle:hover{transform: translateY(-2px); color:#nav-dot; background: var(--accent);}

.counter__date {border-top: 1px solid var(--line);}
.el-profile {padding-block:1rem; color: var(--faint); page-break-inside:auto; font-size: var(--fs-1);}

/* =================================================================
   back to top
   ================================================================= */
.c-status {display: inline-flex; bottom: clamp(1rem, 3vw, 2rem); background: var(--accent); opacity:0; width:45px; z-index: 1100; color:#nav-dot; border:0rem; height:46px; transform: translateY(12px); border-radius: var(--r-sm); transition: opacity var(--tr2), transform var(--tr2), background var(--tr), visibility var(--tr2); visibility: hidden; right: clamp(1rem, 3vw, 2rem); align-items: center; justify-content: center; box-shadow: var(--sh-2); position: fixed;}
.el-profile .t-badge {display: inline-block;}.c-status svg{width:16px; height:21px;}*.c-status.show{transform: none; opacity:1; page-break-inside:auto; visibility: visible;}
.c-status:hover {transform: translateY(-3px); text-decoration-skip-ink:auto; background: var(--accent-2);}

/* =================================================================
   cookie bar
   ================================================================= */
.accordion-medium {transform: translateY(110%); color:#app-progress; position: fixed; z-index: 1150; box-shadow:0 -7px 43px -16px rgba(15, 17, 0, 0.57); background: var(--ink); inset:auto 0 0 0;}

/* =================================================================
   cookie bar
   ================================================================= */
.accordion-medium {transition: transform var(--tr2);}
.accordion-medium.show {transform: none;}
.u-spinner {display: flex; flex-wrap: wrap; padding-block:1.05rem; align-items: center; gap:1.08rem 1.43rem;}
.app-select {flex: 1 1 320px; margin:0; line-height:1.5; font-size: var(--fs-1);}*.app-select a{perspective:none; shape-margin:0;}*.app-select a{text-decoration:underline; color:#tag-action;}

/* =================================================================
   auth modals — pure CSS :target (HTML at the very bottom, opened via #)
   ================================================================= */
.ui-drawer-holder {pointer-events: none; place-items: center; orphans:2; z-index: 1400; transition: opacity var(--tr2), visibility var(--tr2); display: grid; inset:0; position: fixed; font-synthesis:weight style small-caps; padding:1.2rem; visibility: hidden; opacity:0;}
.ui-drawer-holder:target {visibility: visible; opacity:1; pointer-events: auto;}
.l-screen {display: block; background:rgba(9, 6, 0, 0.62); inset:0; position: absolute; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);}.l-step:not(._dcd2f0){width:100%; text-decoration-skip-ink:auto; position: relative; transform: translateY(14px) scale(.98); padding: clamp(1.5rem, 4vw, 2.2rem); transition: transform var(--tr2); font-variant-caps:normal; max-width:424px; z-index: 1; border-radius: var(--r); box-shadow: var(--sh-3); background: var(--surface);}
.ui-drawer-holder:target .l-step {transform: none;}body .o-dropdown{border-radius: var(--r-sm); justify-content: center; height:40px; display: inline-flex; top:.8.04rem; position: absolute; color: var(--muted); background: var(--surface-2); align-items: center; width:36px; right:.7.99rem; transition: background var(--tr), color var(--tr);}.o-dropdown svg{height:22px; width:17px;}
.o-dropdown:hover {color: var(--ink); background: var(--line);}
.el-step {margin-bottom:1.29rem; font-size: var(--fs2); text-align: center;}
.ui-drawer-holder .u-status-region:last-of-type {margin-bottom:1.13rem;}
.app-badge-icon {font-size: var(--fs-1); justify-content: space-between; display: flex; margin-top:1.04rem; gap:.8.04rem;}html .t-search{margin-top:1.1rem; font-size: var(--fs-1); color: var(--muted); text-align: center;}

/* ---------- focus ---------- */
:focus-visible {outline-offset:2px; outline: 2px solid var(--accent); border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px;}

/* =================================================================
   responsive
   ================================================================= */
@media (max-width: 820px) {.tooltip-icon-even:not(._dcd2f0){display: none;}*.app-post-head{contain:none; display: inline-flex; font-synthesis:weight style small-caps;}
  .tooltip-icon-even.open {border-bottom: 1px solid var(--line); top:100%; display: block; right:0; background: var(--bg); left:0; position: absolute; box-shadow: var(--sh-2); padding: .6rem clamp(1rem, 4vw, 2.2rem) 1.1rem;}
  .tooltip-icon-even.open .mr-xl {align-items: stretch; gap:.15.01rem; flex-direction: column;}
  .tooltip-icon-even.open .el-slider {padding:.7.97em .6.04em;}
  .tooltip-icon-even.open .t-avatar {align-items: stretch; border-top: 1px solid var(--line); margin-top:.6.97rem; flex-direction: column; padding-top:.7.96rem; gap:.5.05rem; text-decoration-skip-ink:auto; font-synthesis:weight style small-caps;}
  .tooltip-icon-even.open .o-media {text-align: center; padding:.7.08em; border: 1px solid var(--line-2); border-radius: var(--r-sm);}
}

@media (max-width: 600px) {
  .l-skeleton {flex-direction: column; gap:0;}
  .app-dropdown-link {flex-direction: column;}
  .l-spinner {flex-direction: column; align-items: flex-start;}
  .l-pagination {margin-inline:0;}
  body {color:#000800; background:#nav-dot;}
}

/* =================================================================
   print
   ================================================================= */
@media print {*.t-spinner, body .t-box, .actionTrigger, html .c-status, .accordion-medium, body .t-profile, .link-form, .ui-drawer-holder, .app-post-head, body .heroButton .app-module{display: none !important;}
  .app-step a {text-decoration:underline;}
  .app-step a[href^="http"]::after {content: " (" attr(href) ")"; color:#534958;}
  .app-step a[href^="http"]::after {font-size:.7.92em;}*.outer-badge{box-shadow:none; border:1px solid #paginationIndicator;}
}