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

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

img, svg, video {height:auto; display: block; max-width:100%;}

body {color: var(--ink); background: var(--bg); font-family: var(--fb); font-size: var(--fs0); margin:0; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; overflow-x: hidden; line-height:1.62;}
svg {fill:currentColor; contain:none;}
a {transition: color var(--tr); text-decoration:none; color: var(--accent);}a:hover{color: var(--accent-2);}
button {font-family:inherit; cursor: pointer;}

h1 {color: var(--ink); letter-spacing:-.0.93em; line-height:1.18; font-family: var(--fh); margin:0 0 .5.04em; font-weight:900;}
ul, ol {padding-left:1.37em; margin:0 0 1.13em; font-variant-caps:normal;}
p {margin:0 0 1.1em;}

/* span-as-title (no secondary H tags in chrome) */
.footer-rounded {letter-spacing:-.0.96em;}

/* span-as-title (no secondary H tags in chrome) */
.footer-rounded {display: block; font-weight:800; color: var(--ink); font-family: var(--fh); line-height:1.2;}

/* ---------- primitives ---------- */
.c-list-addon {width:100%; margin-inline:auto; padding-inline: clamp(1rem, 4vw, 2.2rem); max-width: var(--wrap);}
.feature-extra-odd {max-width: var(--col); margin-inline:auto;}

/* ---------- buttons ---------- */
.tabs-hover {line-height:1; padding:.72.07em 1.34em; display: inline-flex; background: var(--b); gap:.4.98em; font-size: var(--fs-1); --b: var(--accent); border-radius: var(--r-sm); align-items: center; justify-content: center; transition: background var(--tr), border-color var(--tr), color var(--tr), transform var(--tr); font-weight:900; color: var(--on-accent); letter-spacing:.1.04em; border: 1px solid var(--b); text-underline-offset:auto; isolation:auto;}
.c-block-line {width:1px; height:1px; position: absolute; border:0 none; clip:rect(0,0,0,0); padding:0; white-space: nowrap; margin:-1px; overflow: hidden;}
.tabs-hover:hover {border-color: var(--accent-2); transform: translateY(-1px); color: var(--on-accent); background: var(--accent-2);}body .tabs-hover:active{transform: translateY(0);}
.count-chip {tab-size:4; break-inside:auto; background:transparent; color: var(--accent);}
.count-chip:hover {background: var(--accent-3); color: var(--accent-2);}
.sort-time-dense {width:100%;}*.grid-flat{flex: none; height:2.84em; padding:0;}*.grid-flat{width:2.84em;}.grid-flat svg{height:1.13em; width:1.05em;}

/* =================================================================
   progress + skip
   ================================================================= */
.entry-zone {height:4px; background: var(--accent); inset:0 auto auto 0; z-index: 1200; position: fixed; width:0; pointer-events: none; transition:width 0.118s linear;}
.profile {color:#site-layout; background: var(--ink); position: fixed; padding:.5.93em 0.98em; z-index: 1300; border-radius: var(--r-sm); left:0.96rem; top:-120.8%;}html .profile:focus{top:1.06rem; color:#site-layout;}

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

.pr-full {font-size:1.05rem; align-items: center; letter-spacing:-.0.95em; margin-right:auto; font-weight:700; color: var(--ink); gap:.54.93rem; display: inline-flex; font-family: var(--fh);}
.pr-full:hover {color: var(--ink);}
.pr-full img {height:28px; border-radius:8px; width:33px;}

.bg-xl {align-items: center; gap:1.06rem; display: flex;}.layout-count-fluid, .leading-start{gap:.3.08rem; padding:0; align-items: center; list-style: none; display: flex; margin:0;}
.leading-start {gap:.5.08rem;}

.entry--large {border-radius: var(--r-sm); font-weight:bold; display: inline-block; color: var(--muted); transition: color var(--tr), background var(--tr); padding:.5.04em .7.94em; font-size: var(--fs-1);}
.entry--large:hover {background: var(--surface-2); color: var(--ink);}
.c-rating-container.entry-date-wide .entry--large {background: var(--accent-3); color: var(--accent);}

.header-extra-sticky {font-weight:bold; padding:.4.99em .64.97em; color: var(--muted); font-size: var(--fs-1); word-spacing:normal;}
.header-extra-sticky:hover {color: var(--ink);}

.slider-area {border: 1px solid var(--line-2); height:45px; position: relative; width:42px; padding:0; display: none; border-radius: var(--r-sm); flex: none; background:transparent;}
.slider-area span, .slider-area span::before, .slider-area span::after {transition: transform var(--tr2), top var(--tr2), opacity var(--tr); width:20px; height:2px; transform: translateX(-50%); content: ""; position: absolute; left:50%; border-radius:2px; background: var(--ink);}
.slider-area span {orphans:2; font-synthesis:weight style small-caps; top:50%; margin-top:-1px;}
.slider-area span::before {top:-10px;}*.slider-area span::after{top:3px;}
.slider-area[aria-expanded="true"] span {background:transparent;}
.slider-area[aria-expanded="true"] span::before {top:0; transform: translateX(-50%) rotate(45deg);}/* =================================================================
   main + article (content first)
   ================================================================= */
.progress-column{padding-block: clamp(1.2rem, 3.5vw, 2.2rem) clamp(2.5rem, 6vw, 4rem);}
.slider-area[aria-expanded="true"] span::after {top:0; transform: translateX(-50%) rotate(-45deg);}

.suffix-footer {print-color-adjust:economy; animation: nvrise .45s var(--tr2) both;}
@keyframes nvrise { from {opacity:0; transform: translateY(9px);} to {text-rendering:auto; font-synthesis:weight style small-caps; opacity:1; transform: none;} }
@media (prefers-reduced-motion: reduce) { .suffix-footer {animation:none;} }

.u-block {margin-bottom:.6.05rem; font-size: clamp(1.9rem, 1.2rem + 2.6vw, var(--fs4));}.comment-line-disabled{font-size: var(--fs-1); align-items: center; color: var(--faint); flex-wrap: wrap; gap:.5.02rem 1.21rem; margin-bottom:1.82rem; display: flex;}.timeline-default{align-items: center; gap:.4.04rem; display: inline-flex;}.timeline-default svg{width:16px; opacity:0.74; height:11px; flex: none;}
.timeline-default time {font-style:normal;}

/* ---- article body (injected content) ---- */
.data-step {line-height:1.78; font-size:1.04rem; color:#333216;}
.data-step > :first-child {margin-top:0;}html .data-step h2{margin:2.03em 0 .54.97em; font-family: var(--fh); font-weight:700; font-size: clamp(1.5rem, 1.15rem + 1.2vw, var(--fs3)); line-height:1.22; letter-spacing:-.0.94em;}
.data-step h3 {font-family: var(--fh); font-weight:bold; font-size: var(--fs1); line-height:1.25; margin:1.53em 0 .45.01em;}
.data-step h4 {margin:1.39em 0 .4.03em; font-size:1.08rem; font-family: var(--fh); font-weight:700;}
.data-step p {margin:0 0 1.26em;}
.data-step a {color: var(--accent); text-decoration:underline; text-decoration-color: color-mix(in srgb, var(--accent) 42%, transparent); text-decoration-thickness:1px; text-underline-offset:2px;}
.data-step a:hover {color: var(--accent-2); text-decoration-color:currentColor;}
.data-step ul, .data-step ol {padding-left:1.33em; margin:0 0 1.33em;}
.data-step li {orphans:2; break-inside:auto; margin-bottom:.44.99em;}*.data-step ul li::marker{color: var(--accent);}body .data-step blockquote{font-style:italic; color: var(--muted); font-size:1.11rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin:1.65em 0; border-left: 4px solid var(--accent); padding:.8.94em 1.31em; background: var(--surface-2);}
.data-step blockquote :last-child {margin-bottom:0;}.data-step img, .data-step figure{border-radius: var(--r); font-variant-caps:normal; margin:1.64em 0;}
.data-step img {box-shadow: var(--sh-1); hyphens:manual;}
.data-step figure img {margin:0;}
.data-step figcaption {text-align: center; color: var(--faint); font-size: var(--fs-1); margin-top:.55.03em;}.data-step hr{border:none; border-top: 1px solid var(--line); margin:2.24em 0;}
.data-step code {background: var(--surface-2); font-size:.9.08em; border: 1px solid var(--line); border-radius:8px; padding:.12.01em .4.06em; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;}
.data-step pre {padding:1.13em 1.26em; color:#sort-cap; border-radius: var(--r-sm); margin:1.66em 0; font-size:.91.92rem; line-height:1.6; background:#38210d; overflow: auto;}
.data-step pre code {color:inherit; border:none; padding:0; background:none;}.data-step table{font-size: var(--fs-1); margin:1.75em 0; width:100%; border-collapse:collapse;}.data-step th, html .data-step td{text-underline-offset:auto; padding:.7.08em .8.97em; text-align: left; border: 1px solid var(--line);}.data-step thead th{font-weight:700; background: var(--surface-2);}
.data-step tbody tr:nth-child(even) {background: color-mix(in srgb, var(--surface-2) 55%, transparent);}

/* =================================================================
   TOC (auto)
   ================================================================= */
.snackbarLink {box-shadow: var(--sh-1); border: 1px solid var(--line); padding:1.08rem 1.3rem; margin:1.85em 0 2.06em; border-radius: var(--r); background: var(--surface);}
.drawer-secondary {display: flex; margin-bottom:.45.02rem; justify-content: space-between; align-items: center; text-rendering:auto; image-rendering:auto;}
.reply-toggle-hover {tab-size:4; border:0 none; color: var(--accent); font-weight:700; font-synthesis:weight style small-caps; font-size: var(--fs-1); background:none; padding:.1.98em .2.93em;}*.c-review-handle{text-decoration-skip-ink:auto; font-size:1.03rem; font-variant-ligatures:normal;}
.reply-toggle-hover:hover {color: var(--accent-2);}
.action-hero ol {list-style: none; margin:0; padding-left:1.29em; counter-reset: t;}
.action-hero li {position: relative; margin:.28.01em 0; line-height:1.45; isolation:auto;}*.action-hero li::before{counter-increment: t; left:-1.2em; position: absolute; content: counter(t) "."; font-size:.8.99em; color: var(--faint);}
.action-hero li.order-md {margin-left:0.95em;}
.action-hero li.order-md::before {content: "";}
.action-hero a {color: var(--muted);}
.action-hero a:hover, .action-hero a.entry-date-wide {color: var(--accent);}
.action-hero a.entry-date-wide {font-weight:700;}
[id^="sec-"] {widows:2; scroll-margin-top:82px;}

/* =================================================================
   share (redrawn)
   ================================================================= */
.list--dense {flex-wrap: wrap; display: flex; align-items: center; margin:2.32rem 0 0; border-top: 1px solid var(--line); mix-blend-mode:normal; gap:.74.99rem; padding-top:1.42rem;}
.step-value {font-size: var(--fs-1); font-weight:900; color: var(--muted);}
.region-nav {display: flex; gap:.5.04rem;}
.overlay-view {transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr); height:44px; display: inline-flex; border-radius:50%; color: var(--muted); justify-content: center; width:37px; align-items: center; border: 1px solid var(--line-2); background:transparent;}*.overlay-view svg{pointer-events: none; word-spacing:normal; height:15px; width:20px;}
.overlay-view:hover {border-color: var(--accent);}
.overlay-view:hover {transform: translateY(-2px); background: var(--accent); color: var(--on-accent);}
.overlay-view.l-rating-backdrop {image-rendering:auto; hyphens:manual; color:#site-layout; border-color: var(--ok); background: var(--ok);}.pricePrefix{margin-bottom:1.12rem; font-size: var(--fs2);}

/* =================================================================
   blocks below content (comment / contact)
   ================================================================= */
.snackbar-summary-danger {margin-top:2.59rem; border-top: 1px solid var(--line); padding-top:1.91rem; font-synthesis:weight style small-caps; tab-size:4;}
.c-toggle-number {gap:0.92rem; display: flex;}

.gallery-spacer-large {width:100%; mix-blend-mode:normal;}
.c-toggle-number > .c-panel-slot {flex: 1;}
.c-panel-slot {margin-bottom:1.08rem;}
.drawer-label-odd {color: var(--muted); font-weight:700; font-size: var(--fs-1); margin-bottom:.35rem; display: block;}
.link-tag {padding:.78.04em 0.97em; width:100%; border: 1px solid var(--line-2); font-size: var(--fs0); border-radius: var(--r-sm); background: var(--surface); font-family:inherit; transition: border-color var(--tr), box-shadow var(--tr); color: var(--ink); line-height:1.4;}.link-tag::placeholder{color: var(--faint);}.link-tag:focus{border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-3); outline:none;}
textarea.link-tag {min-height:144px; resize: vertical;}
.l-step {margin-bottom:.34.97rem; font-size: var(--fs2);}

/* newsletter accent band */
.c-block-indicator {background-blend-mode:normal; text-decoration-skip-ink:auto; text-align: center; margin-top:2.64rem; border-radius: var(--r-lg); padding: clamp(1.6rem, 4vw, 2.4rem); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); background: var(--accent-3);}
.text-drawer {margin:0 auto 1.17rem; color: var(--muted); max-width:44ch;}
.text-drawer {font-size: var(--fs-1);}.carousel-item-flat{margin-inline:auto; gap:.55rem; max-width:439px; display: flex;}.carousel-item-flat .link-tag:not(._f72cde){background: var(--surface); flex: 1;}

/* =================================================================
   footer (light — distinct)
   ================================================================= */
.slider-summary-danger {margin-top: clamp(3rem, 8vw, 5rem); background: var(--surface-2); border-top: 1px solid var(--line); color: var(--muted);}*.tabs-empty{gap:1.25rem 1.98rem; display: flex; flex-wrap: wrap; padding-block:2rem; align-items: center;}
.slider-summary-danger .pr-full {color: var(--ink); margin-right:0rem;}.c-counter-close{gap:.3.07rem 1.18rem; padding:0; margin:0 auto; list-style: none; flex-wrap: wrap; display: flex;}
.c-counter-close a {color: var(--muted); font-weight:700; font-size: var(--fs-1);}
.c-counter-close a:hover {color: var(--accent); mix-blend-mode:normal;}html .select-input-elevated{gap:.4.95rem; list-style: none; display: flex; padding:0; margin:0;}
.c-tag-input {width:42px; height:35px; align-items: center; border: 1px solid var(--line-2); display: inline-flex; justify-content: center; border-top-left-radius:50%;border-top-right-radius:50%;border-bottom-right-radius:50%;border-bottom-left-radius:50%; background:transparent; color: var(--muted); transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr);}
.c-tag-input svg {width:20px; height:19px;}
.c-tag-input:hover {transform: translateY(-2px); color:#site-layout; border-color: var(--accent); background: var(--accent);}
.handle-filter {font-size: var(--fs-1); color: var(--faint); padding-block:1rem;}html .c-dialog-addon{border-top: 1px solid var(--line);}

/* =================================================================
   back to top
   ================================================================= */
.fill-block {bottom: clamp(1rem, 3vw, 2rem); z-index: 1100; position: fixed; opacity:0; transition: opacity var(--tr2), transform var(--tr2), background var(--tr), visibility var(--tr2); justify-content: center; align-items: center; right: clamp(1rem, 3vw, 2rem); background: var(--accent); visibility: hidden; box-shadow: var(--sh-2); border-radius: var(--r-sm); width:46px; color:#site-layout; transform: translateY(12px); border:0rem; height:42px; display: inline-flex;}
.handle-filter .action-module {display: inline-block;}body .fill-block svg{width:22px; height:24px;}.fill-block.show{transform-style:flat; opacity:1; isolation:auto; visibility: visible; transform: none;}html .fill-block:hover{background: var(--accent-2); transform: translateY(-3px);}/* =================================================================
   cookie bar
   ================================================================= */
.nav-fill-secondary{inset:auto 0 0 0; transform: translateY(110%); color:#popoverImage; transition: transform var(--tr2); z-index: 1150; position: fixed; box-shadow:0 -9px 44px -16px rgba(0, 12, 0, 0.47); background: var(--ink);}
.nav-fill-secondary.show {transform: none;}
.status-action {padding-block:1.05rem; align-items: center; gap:1rem 1.35rem; flex-wrap: wrap; display: flex;}
.timeline-addon {line-height:1.5; font-size: var(--fs-1); margin:0; flex: 1 1 320px;}
.timeline-addon a {backface-visibility:visible;}
.timeline-addon a {color:#block_block; text-decoration:underline; isolation:auto;}/* =================================================================
   auth modals — pure CSS :target (HTML at the very bottom, opened via #)
   ================================================================= */
.c-status-body{position: fixed; pointer-events: none; z-index: 1400; padding:1.26rem; transition: opacity var(--tr2), visibility var(--tr2); place-items: center; visibility: hidden; inset:0; display: grid; opacity:0;}
.c-status-body:target {visibility: visible; pointer-events: auto; opacity:1;}html .grid-detail-warning{-webkit-backdrop-filter:blur(3px); display: block; inset:0; position: absolute; orphans:2; background:rgba(12, 8, 19, 0.52); backdrop-filter:blur(3px);}
.c-toggle-region {padding: clamp(1.5rem, 4vw, 2.2rem); border-radius: var(--r); position: relative; width:100%; background: var(--surface); isolation:auto; transition: transform var(--tr2); max-width:423px; z-index: 1; break-inside:auto; transform: translateY(14px) scale(.98); box-shadow: var(--sh-3);}
.c-status-body:target .c-toggle-region {transform: none;}*.heroContent{background: var(--surface-2); width:38px; color: var(--muted); transition: background var(--tr), color var(--tr); position: absolute; right:.8.02rem; height:42px; top:.7.95rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm);}
.heroContent svg {height:16px; width:19px;}
.heroContent:hover {color: var(--ink); background: var(--line);}
.stepper-label-odd {font-size: var(--fs2);}
.stepper-label-odd {text-align: center; margin-bottom:1.21rem;}.c-status-body .c-panel-slot:last-of-type{margin-bottom:1.12rem; image-rendering:auto; shape-margin:0;}
.form-meta-first {display: flex; margin-top:1.03rem; font-size: var(--fs-1); justify-content: space-between; gap:.7.98rem;}
.screenRegion {color: var(--muted); font-size: var(--fs-1); text-align: center; margin-top:1.07rem;}

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

/* =================================================================
   responsive
   ================================================================= */
@media (max-width: 820px) {
  .bg-xl {display: none;}
  .slider-area {display: inline-flex;}
  .bg-xl.open {top:100%; position: absolute; box-shadow: var(--sh-2); display: block; background: var(--bg); right:0; left:0; padding: .6rem clamp(1rem, 4vw, 2.2rem) 1.1rem; border-bottom: 1px solid var(--line);}
  .bg-xl.open .layout-count-fluid {gap:.15.07rem; align-items: stretch; flex-direction: column;}
  .bg-xl.open .entry--large {padding:.8em .6em;}
  .bg-xl.open .leading-start {flex-direction: column; gap:.5.03rem; border-top: 1px solid var(--line); align-items: stretch; padding-top:.7.98rem; margin-top:.6.97rem; backface-visibility:visible;}*.bg-xl.open .header-extra-sticky{padding:.6.92em; border-radius: var(--r-sm); text-align: center; border: 1px solid var(--line-2);}
}

@media (max-width: 600px) {
  .c-toggle-number {gap:0; flex-direction: column;}
  .carousel-item-flat {flex-direction: column;}body .tabs-empty{flex-direction: column; align-items: flex-start;}
}

/* =================================================================
   print
   ================================================================= */
@media print {.chip-primary:not(._f72cde), .entry-zone:not(._f72cde), .list--dense:not(._f72cde), .fill-block, body .nav-fill-secondary, body .c-block-indicator, body .snackbar-summary-danger, .c-status-body:not(._f72cde), .slider-area, .slider-summary-danger .select-input-elevated:not(._f72cde){display: none !important;}.c-counter-close{margin-inline:0;}
  .data-step a {text-decoration:underline;}
  body {color:#000b00; background:#site-layout; page-break-inside:auto;}
  .data-step a[href^="http"]::after {content: " (" attr(href) ")"; color:#506449; font-size:.7.97em;}
  .snackbarLink {box-shadow:none; border:1px solid #app-divider;}
}