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

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

/* ---------- 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;} }img, svg, video{height:auto; max-width:100%; display: block;}

body {line-height:1.62; -webkit-font-smoothing:antialiased; color: var(--ink); font-size: var(--fs0); background: var(--bg); font-family: var(--fb); text-rendering:optimizeLegibility; margin:0; overflow-x: hidden;}
svg {fill:currentColor;}
a {color: var(--accent); text-decoration:none; transition: color var(--tr);}button{cursor: pointer; font-family:inherit;}
a:hover {color: var(--accent-2);}h1{color: var(--ink); font-family: var(--fh); letter-spacing:-.1.04em; margin:0 0 .4.93em; line-height:1.18; font-weight:800;}p{margin:0 0 1.08em;}

/* span-as-title (no secondary H tags in chrome) */
.px-md {font-weight:700; display: block; font-family: var(--fh); line-height:1.2; letter-spacing:-.0.99em; color: var(--ink);}ul, ol{margin:0 0 1.18em; padding-left:1.36em;}/* ---------- primitives ---------- */
.float-sm:not(._efc31a){padding-inline: clamp(1rem, 4vw, 2.2rem); width:100%; max-width: var(--wrap); margin-inline:auto;}
.h-2xl {margin-inline:auto; max-width: var(--col);}

/* ---------- buttons ---------- */
.c-reply-expand {align-items: center; font-size: var(--fs-1); background: var(--b); padding:.71.98em 1.37em; justify-content: center; font-weight:900; border-radius: var(--r-sm); display: inline-flex; transition: background var(--tr), border-color var(--tr), color var(--tr), transform var(--tr); --b: var(--accent); letter-spacing:.0.95em; line-height:1; gap:.4.92em; color: var(--on-accent); border: 1px solid var(--b);}
.rounded-4 {height:1px; width:1px; position: absolute; white-space: nowrap; margin:-1px; padding:0; overflow: hidden; clip:rect(0,0,0,0); border:0rem;}
.c-reply-expand:hover {color: var(--on-accent); background: var(--accent-2); border-color: var(--accent-2); transform: translateY(-1px);}
.c-reply-expand:active {transform: translateY(0);}body .menu-outer-inverse{color: var(--accent); background:transparent;}
.mt-screen {contain:none; width:100%;}.menu-outer-inverse:hover{text-underline-offset:auto; color: var(--accent-2); hyphens:manual; background: var(--accent-3);}.ml-2:not(._efc31a){height:2.89em; flex: none; padding:0; width:2.87em;}.ml-2 svg{height:1.08em; width:1.13em;}/* =================================================================
   progress + skip
   ================================================================= */
.mr-start{pointer-events: none; height:2px; position: fixed; width:0; background: var(--accent); inset:0 auto auto 0; transition:width 0.048s linear; z-index: 1200;}
.snackbar-name {padding:.6.05em 0.99em; z-index: 1300; border-radius: var(--r-sm); position: fixed; color:#price-wrapper; background: var(--ink); left:0.95rem; top:-118.5%;}
.snackbar-name:focus {top:1.06rem;}
.snackbar-name:focus {color:#price-wrapper; widows:2;}

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

.mb-8 {display: inline-flex; font-weight:900; color: var(--ink); margin-right:auto; letter-spacing:-.0.94em; font-size:1.15rem; font-family: var(--fh); gap:.55rem; align-items: center;}
.mb-8:hover {color: var(--ink);}body .mb-8 img{border-radius:9px; width:32px; height:28px;}

.flex-none {gap:1.1rem; align-items: center; display: flex;}
.w-sm, .order-16 {page-break-inside:auto; list-style: none; padding:0; align-items: center; font-variant-ligatures:normal; margin:0; gap:.2.99rem; display: flex;}body .order-16{gap:.4.92rem;}

.order-20 {font-size: var(--fs-1); padding:.5.01em .7.93em;}

.order-20 {border-radius: var(--r-sm); transition: color var(--tr), background var(--tr); font-weight:bold; display: inline-block; color: var(--muted);}
.order-20:hover {color: var(--ink); background: var(--surface-2);}
.tracking-around.pb-xl .order-20 {background: var(--accent-3); color: var(--accent);}

.shadow-6 {font-weight:bold;}

.shadow-6 {font-variant-caps:normal; font-size: var(--fs-1); padding:.5.01em .64.99em; color: var(--muted); text-underline-offset:auto;}html .shadow-6:hover{color: var(--ink);}

.shadow-lg {border-radius: var(--r-sm); border: 1px solid var(--line-2); flex: none; height:48px; position: relative; background:transparent; padding:0; width:41px; display: none;}
.shadow-lg span, .shadow-lg span::before, .shadow-lg span::after {transform: translateX(-50%); content: ""; position: absolute; border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px; left:50%; height:2px; width:18px; background: var(--ink); transition: transform var(--tr2), top var(--tr2), opacity var(--tr);}html .shadow-lg span{margin-top:-1px; top:50%;}
.shadow-lg span::before {top:-3px;}
.shadow-lg span::after {top:10px;}
.shadow-lg[aria-expanded="true"] span {background:transparent;}
.shadow-lg[aria-expanded="true"] span::before {transform: translateX(-50%) rotate(45deg); top:0;}body .shadow-lg[aria-expanded="true"] span::after{top:0; transform: translateX(-50%) rotate(-45deg);}

/* =================================================================
   main + article (content first)
   ================================================================= */
.rounded-2 {perspective:none; widows:2; padding-block: clamp(1.2rem, 3.5vw, 2.2rem) clamp(2.5rem, 6vw, 4rem);}.pr-16{animation: nvrise .45s var(--tr2) both;}
@keyframes nvrise {from{transform: translateY(9px); opacity:0;} to {text-rendering:auto; transform: none; opacity:1;} }
@media (prefers-reduced-motion: reduce) { .pr-16 {animation:none;} }

.ml-10 {font-size: var(--fs-1); color: var(--faint); margin-bottom:1.85rem; align-items: center; gap:.4.96rem 1.25rem; flex-wrap: wrap; display: flex;}

.tabs-container-active {margin-bottom:.6.08rem; font-size: clamp(1.9rem, 1.2rem + 2.6vw, var(--fs4));}
.font-10 {align-items: center; gap:.3.94rem; display: inline-flex;}body .font-10 svg{width:12px; height:12px; flex: none; opacity:0.78;}
.font-10 time {font-style:normal;}/* ---- article body (injected content) ---- */
.px-12{text-underline-offset:auto; font-size:1.11rem; text-decoration-skip-ink:auto; color:hsl(254, 25.6%, 12.1%); line-height:1.78;}
.px-12 > :first-child {margin-top:0;}
.px-12 h2 {font-family: var(--fh); letter-spacing:-.0.99em; font-weight:800; will-change:auto; line-height:1.22; margin:2.08em 0 .55.04em; font-size: clamp(1.5rem, 1.15rem + 1.2vw, var(--fs3)); break-inside:auto;}
.px-12 h3 {font-size: var(--fs1); font-family: var(--fh); line-height:1.25; font-variant-ligatures:normal; font-weight:700; margin:1.53em 0 .45.05em; hyphens:manual;}
.px-12 h4 {font-size:1.12rem; font-weight:bold; hyphens:manual; font-family: var(--fh); background-blend-mode:normal; margin:1.37em 0 .4.04em;}
.px-12 p {margin:0 0 1.25em;}.px-12 a{text-decoration-color: color-mix(in srgb, var(--accent) 42%, transparent); color: var(--accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px;}.px-12 a:hover{text-decoration-color:currentColor; color: var(--accent-2);}.px-12 ul, .px-12 ol{padding-left:1.36em; margin:0 0 1.29em;}
.px-12 li {margin-bottom:.45.07em;}.px-12 ul li::marker{color: var(--accent);}
.px-12 blockquote {margin:1.65em 0; font-size:1.04rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--muted); padding:.9.08em 1.27em; border-left: 4px solid var(--accent); background: var(--surface-2); font-style:italic;}*.px-12 blockquote :last-child{margin-bottom:0;}
.px-12 img, .px-12 figure {border-radius: var(--r); margin:1.65em 0;}
.px-12 img {box-shadow: var(--sh-1);}
.px-12 figure img {margin:0;}
.px-12 figcaption {text-align: center; margin-top:.55.03em; font-size: var(--fs-1); color: var(--faint);}
.px-12 hr {border:0 none; margin:2.26em 0; border-top: 1px solid var(--line);}
.px-12 code {padding:.11.98em .4.04em; background: var(--surface-2); border: 1px solid var(--line); border-radius:8px; font-size:.8.99em; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;}
.px-12 pre {border-radius: var(--r-sm); line-height:1.6; background:#362309; font-size:.91.98rem; color:#comment_tertiary; padding:1.06em 1.31em; margin:1.58em 0; overflow: auto;}
.px-12 pre code {padding:0; background:none; color:inherit; border:0;}
.px-12 table {width:100%; word-spacing:normal; margin:1.75em 0; text-decoration-skip-ink:auto; border-collapse:collapse; font-size: var(--fs-1);}
.px-12 th, .px-12 td {padding:.7.05em .9.03em; text-align: left; border: 1px solid var(--line);}
.px-12 thead th {background: var(--surface-2); font-weight:bold;}.px-12 tbody tr:nth-child(even){background: color-mix(in srgb, var(--surface-2) 55%, transparent);}.tracking-2:not(._efc31a){justify-content: space-between; margin-bottom:.45.02rem; display: flex; align-items: center;}

/* =================================================================
   TOC (auto)
   ================================================================= */
.m-1 {box-shadow: var(--sh-1); border: 1px solid var(--line); border-radius: var(--r); padding:1.06rem 1.37rem; background: var(--surface); margin:1.85em 0 2.1em;}
.text-16 {font-size:0.99rem;}
.grid-1 {padding:.2.08em .2.98em; border:none; background:none; color: var(--accent); font-size: var(--fs-1); font-weight:700;}
.grid-1:hover {color: var(--accent-2);}.flex-4 ol{list-style: none; margin:0rem; counter-reset: t; padding-left:1.26em;}.flex-4 li{margin:.27.96em 0; line-height:1.45; position: relative;}
.flex-4 li::before {position: absolute; content: counter(t) "."; font-size:.8.95em; left:-1.22em; color: var(--faint); counter-increment: t;}html .flex-4 li.col-center{margin-left:0.96em;}
.flex-4 li.col-center::before {tab-size:4; font-variant-caps:normal; content: "";}
.flex-4 a {color: var(--muted);}
.flex-4 a:hover, .flex-4 a.pb-xl {color: var(--accent);}[id^="sec-"]{scroll-margin-top:82px;}.flex-4 a.pb-xl:not(._efc31a){font-weight:700;}/* =================================================================
   share (redrawn)
   ================================================================= */
.h-half:not(._efc31a){flex-wrap: wrap; align-items: center;}/* =================================================================
   share (redrawn)
   ================================================================= */
.h-half:not(._efc31a){display: flex; border-top: 1px solid var(--line); padding-top:1.57rem; margin:2.23rem 0 0; gap:.75.02rem;}
.opacity-between {display: flex; gap:.5.08rem;}.py-4:not(._efc31a){font-size: var(--fs-1); color: var(--muted); font-weight:700;}.text-center{image-rendering:auto; border-radius:50%; transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr); color: var(--muted); height:44px; justify-content: center; background:transparent; width:43px; border: 1px solid var(--line-2); align-items: center; print-color-adjust:economy; display: inline-flex;}
.text-center svg {width:18px; pointer-events: none; height:17px;}
.text-center:hover {color: var(--on-accent); background: var(--accent); transform: translateY(-2px); border-color: var(--accent);}
.text-center.rounded-6 {border-color: var(--ok); background: var(--ok); color:#price-wrapper;}

/* =================================================================
   blocks below content (comment / contact)
   ================================================================= */
.el-box-wrap {border-top: 1px solid var(--line); margin-top:2.59rem; break-inside:auto; mix-blend-mode:normal; padding-top:1.82rem;}
.opacity-10 {font-size: var(--fs2); margin-bottom:1.28rem;}

.tooltip__overlay--muted {width:100%; font-variant-caps:normal;}
.order-screen {display: flex; gap:1.03rem;}html .order-screen > .pt-24{flex: 1;}
.pt-24 {margin-bottom:0.92rem;}
.app-divider-preview {font-size: var(--fs-1); font-weight:bold; color: var(--muted); margin-bottom:.35.08rem; display: block;}
.order-center {font-family:inherit; transition: border-color var(--tr), box-shadow var(--tr); width:100%; background: var(--surface); padding:.78em 0.98em; font-size: var(--fs0); border: 1px solid var(--line-2); color: var(--ink); border-radius: var(--r-sm); line-height:1.4;}
.order-center::placeholder {color: var(--faint);}body .order-center:focus{outline:none; box-shadow: 0 0 0 3px var(--accent-3); border-color: var(--accent);}
textarea.order-center {resize: vertical; min-height:139px;}
.w-xl {margin-bottom:.35rem; font-size: var(--fs2);}

/* newsletter accent band */
.d-4 {border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); text-align: center; padding: clamp(1.6rem, 4vw, 2.4rem); margin-top:2.62rem; background: var(--accent-3);}
.panel__secondary {max-width:44ch; font-size: var(--fs-1); color: var(--muted); margin:0 auto 1.05rem;}
.row-around {max-width:444px; margin-inline:auto; gap:.54.94rem; display: flex;}.row-around .order-center:not(._efc31a){background: var(--surface); image-rendering:auto; flex: 1; will-change:auto;}

/* =================================================================
   footer (light — distinct)
   ================================================================= */
.justify-center {color: var(--muted); margin-top: clamp(3rem, 8vw, 5rem); background: var(--surface-2); border-top: 1px solid var(--line);}body .pt-md{align-items: center; flex-wrap: wrap; padding-block:2rem; gap:1.27rem 1.95rem; display: flex;}
.justify-center .mb-8 {color: var(--ink); margin-right:0;}

.rounded-around {padding:0; display: flex; flex-wrap: wrap; margin:0 auto; gap:.3rem 1.28rem; list-style: none;}
.rounded-around a {font-weight:700; font-size: var(--fs-1); color: var(--muted); text-decoration-skip-ink:auto; orphans:2;}
.rounded-around a:hover {color: var(--accent);}.border-screen{transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr); height:42px; color: var(--muted); background:transparent; border-radius:50%; justify-content: center; border: 1px solid var(--line-2); align-items: center; width:40px; display: inline-flex;}

.layoutTime {margin:0; gap:.4.99rem; list-style: none; display: flex; padding:0;}
.border-screen svg {width:20px; height:18px;}

.py-2 {border-top: 1px solid var(--line);}.border-screen:hover{color:#price-wrapper; background: var(--accent); border-color: var(--accent); transform: translateY(-2px);}body .font-lg{color: var(--faint); padding-block:1rem; font-size: var(--fs-1);}
.font-lg .toolbar {display: inline-block;}

/* =================================================================
   back to top
   ================================================================= */
.py-screen {position: fixed; right: clamp(1rem, 3vw, 2rem);}

/* =================================================================
   back to top
   ================================================================= */
.py-screen {color:#price-wrapper; width:50px; align-items: center; justify-content: center; display: inline-flex; transform: translateY(12px); z-index: 1100; height:47px; bottom: clamp(1rem, 3vw, 2rem); opacity:0; transition: opacity var(--tr2), transform var(--tr2), background var(--tr), visibility var(--tr2); box-shadow: var(--sh-2); background: var(--accent); visibility: hidden; border-radius: var(--r-sm); border:0;}
.py-screen svg {height:23px; mix-blend-mode:normal; width:24px;}
.py-screen.show {transform: none; visibility: visible; opacity:1;}.py-screen:hover{transform: translateY(-3px); image-rendering:auto; background: var(--accent-2);}

/* =================================================================
   cookie bar
   ================================================================= */
.shadow-8 {box-shadow:0 -11px 37px -19px rgba(0, 15, 16, 0.46); position: fixed; transition: transform var(--tr2); transform: translateY(110%); z-index: 1150; background: var(--ink); inset:auto 0 0 0; color:#listDetail;}body .shadow-8.show{transform: none;}
.grid-2xl {flex-wrap: wrap; align-items: center; text-decoration-skip-ink:auto; padding-block:1.05rem; gap:1.08rem 1.42rem; display: flex; image-rendering:auto;}
.border-6 {line-height:1.5; margin:0em; font-size: var(--fs-1); flex: 1 1 320px;}.border-6 a{text-decoration:underline; color:#popover-tertiary;}/* =================================================================
   auth modals — pure CSS :target (HTML at the very bottom, opened via #)
   ================================================================= */
.selectInner{z-index: 1400; display: grid; padding:1.21rem; visibility: hidden; pointer-events: none; inset:0rem; transition: opacity var(--tr2), visibility var(--tr2); position: fixed; place-items: center; opacity:0;}
.selectInner:target {pointer-events: auto; visibility: visible; opacity:1;}
.entryCell {position: absolute; -webkit-backdrop-filter:blur(3px); inset:0; display: block; backdrop-filter:blur(3px); background:rgba(29, 11, 21, 0.52);}*.h-full{max-width:424px; transform: translateY(14px) scale(.98); box-shadow: var(--sh-3); z-index: 1; padding: clamp(1.5rem, 4vw, 2.2rem); width:100%; transition: transform var(--tr2); border-radius: var(--r); position: relative; background: var(--surface);}.selectInner:target .h-full{transform: none;}
.entryOuter {width:42px; display: inline-flex;}
.entryOuter {border-radius: var(--r-sm); align-items: center; position: absolute; transition: background var(--tr), color var(--tr); background: var(--surface-2); top:.7.95rem; height:40px; right:.8.05rem; justify-content: center; color: var(--muted);}.entryOuter svg{width:16px; height:16px;}
.entryOuter:hover {background: var(--line); color: var(--ink);}
.selectInner .pt-24:last-of-type {margin-bottom:1.09rem;}
.pl-xl {margin-bottom:1.23rem; font-size: var(--fs2); text-align: center;}
.toggleLink {font-size: var(--fs-1); display: flex; margin-top:1.02rem; gap:.8.05rem; justify-content: space-between;}
.col-auto {font-size: var(--fs-1); color: var(--muted); margin-top:1.13rem; text-align: center;}

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

/* =================================================================
   responsive
   ================================================================= */
@media (max-width: 820px) {
  .flex-none {display: none;}
  .shadow-lg {display: inline-flex;}
  .flex-none.open {background: var(--bg); right:0; position: absolute; display: block; padding: .6rem clamp(1rem, 4vw, 2.2rem) 1.1rem; box-shadow: var(--sh-2); border-bottom: 1px solid var(--line); top:100%; left:0px;}
  .flex-none.open .w-sm {gap:.14.94rem; flex-direction: column; align-items: stretch;}
  .flex-none.open .order-20 {padding:.7.93em .6.02em;}.flex-none.open .order-16:not(._efc31a){padding-top:.7.99rem; gap:.5.01rem; margin-top:.7.07rem; flex-direction: column; align-items: stretch; border-top: 1px solid var(--line);}*.flex-none.open .shadow-6{border-radius: var(--r-sm); padding:.7.07em; border: 1px solid var(--line-2); text-align: center;}html .row-around{flex-direction: column;}
}

@media (max-width: 600px) {html .order-screen{flex-direction: column; gap:0;}
  .pt-md {flex-direction: column; align-items: flex-start;}.rounded-around:not(._efc31a){margin-inline:0;}
}

/* =================================================================
   print
   ================================================================= */
@media print {
  .m-auto, .mr-start, .h-half, .py-screen, .shadow-8, .d-4, .el-box-wrap, .selectInner, .shadow-lg, .justify-center .layoutTime {display: none !important;}
  body {background:#price-wrapper; color:#000011;}
  .px-12 a {text-decoration:underline;}html .px-12 a[href^="http"]::after{font-size:.8.01em; color:#4a4f43; content: " (" attr(href) ")";}.m-1{border:1px solid #app-stepper; box-shadow:none;}
}