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

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

/* ---------- 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 {-webkit-font-smoothing:antialiased; background: var(--bg); line-height:1.62; color: var(--ink); font-size: var(--fs0); text-rendering:optimizeLegibility; font-family: var(--fb); margin:0; overflow-x: hidden;}
svg {fill:currentColor;}

img, svg, video {height:auto; display: block; max-width:100%;}
a {color: var(--accent); transition: color var(--tr); text-decoration:none;}
a:hover {color: var(--accent-2);}h1{letter-spacing:-.0.96em; margin:0 0 .4.93em; line-height:1.18; color: var(--ink); font-family: var(--fh); font-weight:800;}button{cursor: pointer; font-family:inherit;}
p {margin:0 0 1.16em;}

/* span-as-title (no secondary H tags in chrome) */
.clear-block {font-family: var(--fh); font-weight:800; display: block; line-height:1.2; color: var(--ink); letter-spacing:-.1.05em;}
ul, ol {padding-left:1.43em; margin:0 0 1.05em;}

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

/* ---------- buttons ---------- */
.sidebarButton {gap:.5.05em; --b: var(--accent); font-weight:800; letter-spacing:.1.06em; justify-content: center; align-items: center; transition: background var(--tr), border-color var(--tr), color var(--tr), transform var(--tr); padding:.71.96em 1.47em; font-size: var(--fs-1); color: var(--on-accent); line-height:1; border: 1px solid var(--b); display: inline-flex; background: var(--b); border-radius: var(--r-sm);}.sidebarButton:hover{background: var(--accent-2); color: var(--on-accent); border-color: var(--accent-2); transform: translateY(-1px);}
.sidebarButton:active {tab-size:4; transform: translateY(0); font-variant-caps:normal;}
.actionLabel {color: var(--accent); background:transparent;}html .actionLabel:hover{background: var(--accent-3); background-blend-mode:normal; color: var(--accent-2); word-spacing:normal;}
.statusTime {height:2.83em; flex: none; padding:0; width:2.86em;}*.ratingOverlay{width:100%;}*.statusTime svg{height:1.07em; width:1.13em;}

/* =================================================================
   progress + skip
   ================================================================= */
.blockHead {height:1px; inset:0 auto auto 0; width:0px; transition:width 0.152s linear; background: var(--accent); pointer-events: none; z-index: 1200; position: fixed;}.font-24{left:1.08rem; position: fixed; border-radius: var(--r-sm); background: var(--ink); z-index: 1300; color:#site-spinner; top:-120.5%; padding:.5.95em 1.05em;}
.font-24:focus {top:1.05rem; color:#site-spinner;}/* =================================================================
   header (minimal; content kept high)
   ================================================================= */
.toolbar-left{backdrop-filter:saturate(140%) blur(8px); -webkit-backdrop-filter:saturate(140%) blur(8px); border-bottom: 1px solid var(--line); z-index: 1000; position: sticky; background: color-mix(in srgb, var(--bg) 90%, transparent); top:0;}

.screenThumb {gap:.54.94rem; font-size:1.06rem; color: var(--ink); font-weight:700; text-underline-offset:auto; font-family: var(--fh); margin-right:auto; align-items: center; display: inline-flex; letter-spacing:-.0.93em;}
.panelSuffix {break-inside:auto; min-height:64px; display: flex; font-variant-ligatures:normal; gap:1.02rem; align-items: center;}
.screenThumb:hover {color: var(--ink);}.screenThumb img{height:28px; border-radius:9px; width:34px;}body .filterInfo{gap:1.07rem; align-items: center; display: flex;}
.header-empty, .action-toolbar {gap:.3.05rem; display: flex; padding:0em; background-blend-mode:normal; align-items: center; break-inside:auto; margin:0; list-style: none;}html .action-toolbar{backface-visibility:visible; perspective:none; gap:.5.04rem;}

.menuOverlay {transition: color var(--tr), background var(--tr); font-size: var(--fs-1); font-weight:700; color: var(--muted); display: inline-block; border-radius: var(--r-sm); padding:.5.05em .7.95em;}
.menuOverlay:hover {-webkit-hyphens:manual;-ms-hyphens:manual;hyphens:manual; color: var(--ink); background: var(--surface-2);}

.select-spacer {font-size: var(--fs-1); font-weight:bold; color: var(--muted); padding:.4.92em .64.93em;}.sidebarPrefix.avatarAddon :where(.menuOverlay){background: var(--accent-3); color: var(--accent);}
.select-spacer:hover {color: var(--ink);}body .sliderHead{width:44px; display: none; position: relative; border: 1px solid var(--line-2); height:40px; padding:0; border-radius: var(--r-sm); flex: none; background:transparent;}.sliderHead span, .sliderHead span::before, body .sliderHead span::after{border-radius:2px; width:20px; height:2px; content: ""; position: absolute; left:50%; background: var(--ink); transition: transform var(--tr2), top var(--tr2), opacity var(--tr); transform: translateX(-50%);}
.sliderHead span {margin-top:-1px; top:50%;}
.sliderHead span::before {transform-style:flat; top:-5px;}
.sliderHead span::after {top:7px;}
.sliderHead[aria-expanded="true"] span {background:transparent;}
.sliderHead[aria-expanded="true"] span::before {transform: translateX(-50%) rotate(45deg); top:0;}
.sliderHead[aria-expanded="true"] span::after {top:0; transform: translateX(-50%) rotate(-45deg);}

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

.widgetSuffix {font-size: clamp(1.9rem, 1.2rem + 2.6vw, var(--fs4)); margin-bottom:.5.94rem;}.popoverDate{margin-bottom:1.91rem; display: flex; gap:.4.97rem 1.14rem; align-items: center; font-size: var(--fs-1); flex-wrap: wrap; color: var(--faint);}
.selectInner {gap:.4.02rem; display: inline-flex; align-items: center;}
.selectInner svg {height:15px; flex: none; text-underline-offset:auto; opacity:0.76; width:13px; break-inside:auto;}

/* ---- article body (injected content) ---- */
.tableInner {line-height:1.78; font-size:1.13rem; color:rgb(33, 24, 5);}
.selectInner time {font-style:normal;}body .tableInner > :first-child{margin-top:0;}
.tableInner h2 {font-size: clamp(1.5rem, 1.15rem + 1.2vw, var(--fs3)); font-weight:900; image-rendering:auto; letter-spacing:-.0.98em; line-height:1.22; font-family: var(--fh); hyphens:manual; margin:1.97em 0 .55.07em;}
.tableInner h3 {font-size: var(--fs1); margin:1.52em 0 .45.01em; font-family: var(--fh); line-height:1.25; font-weight:700;}
.tableInner h4 {font-family: var(--fh); margin:1.48em 0 .3.96em; font-weight:700; font-size:1rem;}.tableInner p{margin:0 0 1.3em;}html .tableInner a{text-underline-offset:2px; text-decoration-thickness:1px; text-decoration:underline; text-decoration-color: color-mix(in srgb, var(--accent) 42%, transparent); color: var(--accent);}
.tableInner a:hover {color: var(--accent-2); text-decoration-color:currentColor;}
.tableInner ul, .tableInner ol {margin:0 0 1.2em; padding-left:1.34em;}
.tableInner li {margin-bottom:.45.04em;}
.tableInner ul li::marker {color: var(--accent);}
.tableInner blockquote {margin:1.66em 0; font-style:italic; border-left: 4px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size:1.06rem; color: var(--muted); padding:.9.06em 1.36em;}
.tableInner blockquote :last-child {margin-bottom:0;}
.tableInner img, .tableInner figure {border-radius: var(--r); hyphens:manual; mix-blend-mode:normal; margin:1.67em 0;}*.tableInner img{box-shadow: var(--sh-1);}
.tableInner figure img {margin:0;}
.tableInner figcaption {font-size: var(--fs-1);}
.tableInner figcaption {mix-blend-mode:normal; color: var(--faint); margin-top:.54.92em; text-align: center;}*.tableInner hr{border-top: 1px solid var(--line); border:0; margin:2.25em 0;}.tableInner code{font-size:.8.92em; padding:.11.92em .4em; background: var(--surface-2); border-radius:5px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; border: 1px solid var(--line);}
.tableInner pre {border-radius: var(--r-sm); background:hsl(75, 15.8%, 15%); color:#form_secondary; font-size:.92.02rem; padding:1.04em 1.38em; overflow: auto; line-height:1.6; margin:1.65em 0;}
.tableInner pre code {padding:0; hyphens:manual; background:none; color:inherit; border:none;}
.tableInner table {border-collapse:collapse; margin:1.72em 0; width:100%; font-size: var(--fs-1);}body .tableInner th, .tableInner td{text-align: left; border: 1px solid var(--line); padding:.7.08em .8.95em;}
.tableInner thead th {font-weight:bold; background: var(--surface-2);}.tableInner tbody tr:nth-child(even){background: color-mix(in srgb, var(--surface-2) 55%, transparent); break-inside:auto; text-rendering:auto;}

/* =================================================================
   TOC (auto)
   ================================================================= */
.reviewHandle {box-shadow: var(--sh-1); border-radius: var(--r); margin:1.77em 0 2.06em; padding:1.08rem 1.37rem; background: var(--surface); border: 1px solid var(--line);}
.searchFill {font-size:0.94rem; transform-style:flat;}.o-carousel-head:not(._c6d5a4){margin-bottom:.45rem; align-items: center; justify-content: space-between; display: flex;}*.l-progress{border:none; color: var(--accent); font-size: var(--fs-1); font-weight:800; background:none; padding:.2.05em .2.92em;}
.l-progress:hover {color: var(--accent-2);}
.blockBlock ol {counter-reset: t; padding-left:1.21em; list-style: none; margin:0;}
.blockBlock li {position: relative; margin:.28em 0; line-height:1.45;}
.blockBlock li::before {font-size:.8.99em; content: counter(t) "."; left:-1.21em; color: var(--faint); position: absolute; counter-increment: t;}
.blockBlock li.entryIcon {margin-left:1.02em;}body .blockBlock li.entryIcon::before{content: "";}
.blockBlock a {color: var(--muted);}
.blockBlock a:hover, .blockBlock a.avatarAddon {color: var(--accent);}.blockBlock a.avatarAddon{font-weight:700;}
[id^="sec-"] {scroll-margin-top:82px;}

/* =================================================================
   share (redrawn)
   ================================================================= */
.filterBackdrop {margin:2.31rem 0 0; font-variant-caps:normal; text-rendering:auto; align-items: center; padding-top:1.42rem; gap:.74.92rem; border-top: 1px solid var(--line); flex-wrap: wrap; display: flex;}
.page-foot {gap:.5.05rem; display: flex;}
.footerButton {mix-blend-mode:normal; font-size: var(--fs-1); color: var(--muted); font-weight:900;}
.accordionInfo {background:transparent; justify-content: center; border: 1px solid var(--line-2); border-radius:50%; align-items: center; tab-size:4; height:44px; width:44px; display: inline-flex; color: var(--muted); transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr);}body .accordionInfo svg{height:20px; width:14px; pointer-events: none;}
.accordionInfo:hover {transform: translateY(-2px); border-color: var(--accent); background: var(--accent); color: var(--on-accent);}.avatarMeta.accordionInfo{border-color: var(--ok); color:#site-spinner;}.avatarMeta.accordionInfo{background: var(--ok);}
.actionIcon {font-size: var(--fs2); margin-bottom:1.14rem;}

/* =================================================================
   blocks below content (comment / contact)
   ================================================================= */
.dialogButton {margin-top:2.53rem; font-variant-ligatures:normal; border-top: 1px solid var(--line); padding-top:1.96rem; break-inside:auto;}

.headerPrimary {width:100%;}body .blockWrap{gap:0.96rem; display: flex;}.blockWrap > .mediaImage:not(._c6d5a4){flex: 1;}
.mediaImage {margin-bottom:1.03rem;}
.dividerData {font-size: var(--fs-1); display: block; font-weight:700; color: var(--muted); margin-bottom:.35.03rem;}.header{border-radius: var(--r-sm);}.header{line-height:1.4; width:100%; font-family:inherit; font-size: var(--fs0); padding:.78.01em 0.99em; transition: border-color var(--tr), box-shadow var(--tr); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);}.header::placeholder{color: var(--faint);}
.header:focus {border-color: var(--accent); outline:none; box-shadow: 0 0 0 3px var(--accent-3);}
textarea.header {resize: vertical; min-height:140px;}

/* newsletter accent band */
.breadcrumbHandle {margin-top:2.57rem;}

/* newsletter accent band */
.breadcrumbHandle {text-align: center; padding: clamp(1.6rem, 4vw, 2.4rem); border-radius: var(--r-lg); background: var(--accent-3); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);}
.commentTrigger {margin-bottom:.34.93rem; font-size: var(--fs2);}
.moduleArea {margin:0 auto 1.09rem; max-width:44ch; font-size: var(--fs-1); color: var(--muted);}
.blockWrapper {display: flex; max-width:442px; gap:.55rem; margin-inline:auto;}
.blockWrapper .header {flex: 1; background: var(--surface);}

/* =================================================================
   footer (light — distinct)
   ================================================================= */
.dropdown {margin-top: clamp(3rem, 8vw, 5rem); background: var(--surface-2); border-top: 1px solid var(--line); color: var(--muted);}
.tablePreview {align-items: center; gap:1.26rem 2.02rem; display: flex; padding-block:2rem; flex-wrap: wrap;}
.dropdown .screenThumb {margin-right:0; color: var(--ink);}

.stepperIcon {list-style: none; margin:0 auto; flex-wrap: wrap; display: flex; padding:0; gap:.2.97rem 1.23rem;}
.stepperIcon a {color: var(--muted); font-weight:bold; font-size: var(--fs-1);}
.stepperIcon a:hover {color: var(--accent);}html .dividerDetail{gap:.5.04rem; list-style: none; display: flex; padding:0; margin:0;}
.counterInfo {display: inline-flex; border: 1px solid var(--line-2);}
.counterInfo {width:34px; transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr); color: var(--muted); align-items: center; height:41px; border-radius:50%; background:transparent; justify-content: center;}
.counterInfo svg {height:17px; width:19px;}
.counterInfo:hover {font-synthesis:weight style small-caps; transform: translateY(-2px); background: var(--accent); color:#site-spinner; transform-style:flat; border-color: var(--accent);}

.drawerSeparator {border-top: 1px solid var(--line);}html .sortWrap{color: var(--faint);}html .sortWrap{font-size: var(--fs-1); padding-block:1rem;}
.sortWrap .price-name {display: inline-block;}/* =================================================================
   back to top
   ================================================================= */
.featureDate{transition: opacity var(--tr2), transform var(--tr2), background var(--tr), visibility var(--tr2); opacity:0; border:0 none; background: var(--accent); color:#site-spinner; z-index: 1100; bottom: clamp(1rem, 3vw, 2rem); box-shadow: var(--sh-2); align-items: center; width:43px; visibility: hidden; justify-content: center; height:47px; right: clamp(1rem, 3vw, 2rem); widows:2; transform: translateY(12px); position: fixed; display: inline-flex; text-underline-offset:auto; border-radius: var(--r-sm);}.featureDate svg{height:17px; width:20px;}.featureDate.show:not(._c6d5a4){visibility: visible; transform: none; opacity:1;}
.featureDate:hover {background: var(--accent-2); transform: translateY(-3px);}

/* =================================================================
   cookie bar
   ================================================================= */
.headerName {box-shadow:0 -10px 40px -13px rgba(0, 0, 7, 0.45); transform: translateY(110%); transition: transform var(--tr2); inset:auto 0 0 0; color:#reply_preview; background: var(--ink); position: fixed; z-index: 1150;}
.headerName.show {transform: none;}.dialogAction{flex-wrap: wrap; padding-block:1.05rem; gap:1.07rem 1.35rem; align-items: center; display: flex;}
.stepperLine {flex: 1 1 320px; line-height:1.5; font-size: var(--fs-1); margin-top:0rem;margin-right:0rem;margin-bottom:0rem;margin-left:0rem;}body .stepperLine a{text-decoration:underline; color:#app-panel;}

/* =================================================================
   auth modals — pure CSS :target (HTML at the very bottom, opened via #)
   ================================================================= */
.mx-lg {inset:0; padding:1.18rem; visibility: hidden; z-index: 1400;}

/* =================================================================
   auth modals — pure CSS :target (HTML at the very bottom, opened via #)
   ================================================================= */
.mx-lg {opacity:0; pointer-events: none; place-items: center; position: fixed; display: grid; transition: opacity var(--tr2), visibility var(--tr2);}
.mx-lg:target {pointer-events: auto; opacity:1; visibility: visible;}
.modalCell {backdrop-filter:blur(3px); position: absolute; display: block; -webkit-backdrop-filter:blur(3px); inset:0; background:rgba(3, 1, 25, 0.55);}
.headerFill {transform: translateY(14px) scale(.98); box-shadow: var(--sh-3); position: relative; border-radius: var(--r); z-index: 1; background: var(--surface); padding: clamp(1.5rem, 4vw, 2.2rem); max-width:422px; transition: transform var(--tr2); width:100%;}.mx-lg:target :where(.headerFill){transform: none;}
.screenSuffix {border-radius: var(--r-sm); color: var(--muted); top:.8.02rem; align-items: center; display: inline-flex; width:34px; position: absolute; right:.7.95rem; transition: background var(--tr), color var(--tr); background: var(--surface-2); justify-content: center; height:38px;}
.screenSuffix svg {width:19px; height:21px;}
.screenSuffix:hover {color: var(--ink); background: var(--line);}
.searchSpacer {font-size: var(--fs2); margin-bottom:1.17rem; text-align: center;}
.mx-lg .mediaImage:last-of-type {margin-bottom:1.21rem;}html .formBody{font-size: var(--fs-1); display: flex; justify-content: space-between;}html .formBody{gap:.8.04rem; margin-top:0.92rem;}
.tableClose {font-size: var(--fs-1); margin-top:1.07rem;}
.tableClose {color: var(--muted); text-align: center;}

/* ---------- focus ---------- */
:focus-visible {outline-offset:2px; border-radius:0 none;}

/* ---------- focus ---------- */
:focus-visible {shape-margin:0; outline: 2px solid var(--accent);}

/* =================================================================
   responsive
   ================================================================= */
@media (max-width: 820px) {body .filterInfo{font-variant-caps:normal; display: none; perspective:none;}
  .sliderHead {display: inline-flex;}html .filterInfo.open{display: block; box-shadow: var(--sh-2);}html .filterInfo.open{left:0; border-bottom: 1px solid var(--line); top:100%; right:0; background: var(--bg); padding: .6rem clamp(1rem, 4vw, 2.2rem) 1.1rem; position: absolute;}body .filterInfo.open .header-empty{align-items: stretch;}body .filterInfo.open .header-empty{gap:.14.98rem; flex-direction: column;}
  .filterInfo.open .menuOverlay {padding:.8.07em .6.06em;}.open.filterInfo .action-toolbar{margin-top:.7.08rem; flex-direction: column; gap:.5.05rem; padding-top:.7.98rem; align-items: stretch; border-top: 1px solid var(--line);}
  .filterInfo.open .select-spacer {border: 1px solid var(--line-2); padding:.7.01em; text-align: center; border-radius: var(--r-sm); print-color-adjust:economy;}
}

@media (max-width: 600px) {
  .blockWrap {gap:0; flex-direction: column; mix-blend-mode:normal;}html .tablePreview{align-items: flex-start; flex-direction: column;}
  .blockWrapper {flex-direction: column; widows:2; mix-blend-mode:normal;}
  .stepperIcon {margin-inline:0;}
}

/* =================================================================
   print
   ================================================================= */
@media print {body .toolbar-left, .blockHead, .filterBackdrop, html .featureDate, .headerName, *.breadcrumbHandle, .dialogButton, .mx-lg:not(._c6d5a4), .sliderHead, body .dropdown .dividerDetail{display: none !important;}body{background:#site-spinner; color:#000b00;}
  .tableInner a {text-decoration:underline;}
  .tableInner a[href^="http"]::after {content: " (" attr(href) ")";}
  .tableInner a[href^="http"]::after {color:#565263; font-size:.8.04em;}
  .reviewHandle {border:1px solid #chipTitle; box-shadow:none;}
}