/* =======================================================================
   STYLE.CSS  —  content-first editorial layout
   ======================================================================= */

:root {--ok:         #15803d; --paper-2:    #media_wrapper; --ink:        #1c1917; --paper:      #tooltipBody; --read: 760px; --line:       #featureArea;}/* ---- base ---- */
*, *::before, *::after{padding:0; perspective:none; box-sizing: border-box; mix-blend-mode:normal; margin:0;}/* =======================================================================
   STYLE.CSS  —  content-first editorial layout
   ======================================================================= */

:root {--paper-3:    #page-layout; --ease: .22s cubic-bezier(.4,0,.2,1); --line-soft:  #page-layout; --sh-3: 0 18px 44px rgba(28,25,23,.16); --accent-3:   #commentHead; --accent-2:   #9a3412; --bar: 64px; --ink-soft:   #292524; --sh-2: 0 6px 20px rgba(28,25,23,.09); --accent-wash:#site-grid; --no:         #section-expand; --dark:       #1c1917; --faint:      #78716c; --sh-1: 0 1px 2px rgba(28,25,23,.06); --r-m: 10px; --r-s: 6px; --sans:  'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --muted:      #57534e; --bound: 1160px; --serif: 'Spectral', Georgia, 'Times New Roman', serif; --r-l: 16px; --dark-2:     #292524; --accent:     #sortPreview;}
html {scroll-padding-top: calc(var(--bar) + 16px); -webkit-text-size-adjust:100%;}
html {scroll-behavior: smooth;}
img, svg {display: block; max-width:100%;}
body {color: var(--muted); line-height:1.65; background: var(--paper-2); font-size:14px; -webkit-font-smoothing:antialiased; font-family: var(--sans); -moz-osx-font-smoothing:grayscale;}
img {height:auto;}
a {text-decoration:none; color: var(--accent); transition: color var(--ease);}
a:hover {color: var(--accent-2);}ul, ol{list-style: none;}button{font-family:inherit; border:0 none; cursor: pointer; color:inherit; background:none;}
input, textarea {color: var(--ink); will-change:auto; orphans:2; font-family:inherit; font-size:inherit;}p{margin:0 0 0.94em; font-synthesis:weight style small-caps;}h1{font-family: var(--serif); color: var(--ink); line-height:1.18; font-weight:700;}
strong, b {font-weight:700; color: var(--ink-soft);}

.dropdownTrigger {margin:0 auto; max-width: var(--bound); padding:0 20px;}
.featureRow {width:1px; padding:0; overflow: hidden; white-space: nowrap; margin:-1px; clip:rect(0,0,0,0); position: absolute; border:none; height:1px;}

/* span-based section captions (no heading tags outside the article body) */
.progressExpand, .mediaTrigger, .c-tooltip-suffix, .footerData, .blockHandle,
.alert-default, .modalSummary, .blockArea {display: block;}

/* span-based section captions (no heading tags outside the article body) */
.progressExpand, .mediaTrigger, .c-tooltip-suffix, .footerData, .blockHandle,
.alert-default, .modalSummary, .blockArea {font-family: var(--serif); color: var(--ink);}/* ---- progress ---- */
.filterThumb{left:0; background: linear-gradient(90deg, var(--accent), var(--accent-3)); transition:width 0.063s linear; position: fixed; width:0; z-index: 1400; top:0; height:7px;}

/* =======================================================================
   MASTHEAD  (fixed; sits visually on top although later in source)
   ======================================================================= */
.toggleThumb {backdrop-filter:saturate(150%) blur(10px); background:rgba(255, 255, 255, 0.98); z-index: 1000; transition: box-shadow var(--ease); border-bottom: 1px solid var(--line); height: var(--bar); top:0; position: fixed; left:0; -webkit-backdrop-filter:saturate(150%) blur(10px); right:0;}
.toggleThumb.is-stuck {box-shadow: var(--sh-2);}*.grid-even{flex-shrink: 0; align-items: center; display: inline-flex;}
.toggleThumb .dropdownTrigger {align-items: center; gap:19px; height:100%; display: flex;}
.grid-even img {width:auto; height:35px;}.boxIcon:not(._b688de){align-items: center; flex: 1; display: flex; gap:12px;}
.searchWrap {display: flex; align-items: center; gap:2px;}
.reviewSection {font-size:16.5px; padding:12px 13px; display: inline-flex; align-items: center; color: var(--muted); transition: color var(--ease), background var(--ease); border-radius: var(--r-s); font-weight:500;}*.reviewSection:hover{color: var(--ink);}*.reviewSection:hover{text-underline-offset:auto; background: var(--paper-3);}
.c-panel-link {align-items: center; justify-content: center; font-size:12px; border-radius: var(--r-m); font-weight:500; padding:10px 23px; color:#layout-data; display: inline-flex; transition: background var(--ease), transform var(--ease), box-shadow var(--ease); background: var(--accent); margin-left:auto;}
.c-panel-link:hover {box-shadow:0 2px 16px rgba(196, 70, 13, 0.33); transform: translateY(-1px); color:#layout-data; background: var(--accent-2);}

.widgetHolder {border-radius: var(--r-s); padding:4px; flex-direction: column; gap:4px; justify-content: center; margin-left:auto; display: none; width:44px; height:38px;}
.widgetHolder i {background: var(--ink); display: block; transition: transform var(--ease), opacity var(--ease); height:2px; border-radius:2px;}
.widgetHolder.is-open i:nth-child(1) {transform: translateY(7px) rotate(45deg);}body .widgetHolder.is-open i:nth-child(2){opacity:0;}
.widgetHolder.is-open i:nth-child(3) {transform: translateY(-7px) rotate(-45deg);}/* ---- buttons ---- */
.reviewInput{color:#layout-data; justify-content: center; background: var(--accent); gap:12px; align-items: center; white-space: nowrap; padding:6px 22px; font-family: var(--sans); border-radius: var(--r-m); transition: background var(--ease), transform var(--ease), box-shadow var(--ease); font-weight:500; font-size:11.5px; display: inline-flex;}
.reviewInput:hover {background: var(--accent-2); transform: translateY(-1px);}
.reviewInput:hover {box-shadow:0 8px 18px rgba(206, 49, 27, 0.2); color:#layout-data;}
.priceSection {margin-top:4px; width:100%;}
.priceSection {padding:10px 22px;}
.badge__holder {align-self: flex-start; font-size:12px;}

/* =======================================================================
   MAIN  (content-first; cleared from the fixed masthead)
   ======================================================================= */
.reviewClose {padding-top: var(--bar);}
.badge__holder {padding:14px 25px;}
.filterContent {padding:26px 0 60px; margin:0 auto;}
.filterContent {max-width: var(--read);}

/* =======================================================================
   POST
   ======================================================================= */
.heroBody {padding-top:43px;padding-right:43px;padding-bottom:43px;padding-left:43px; box-shadow: var(--sh-1); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l); isolation:auto;}
.spinner-date {flex-wrap: wrap; padding-bottom:24px; gap:2px 11px; border-bottom: 1px solid var(--line-soft); margin-bottom:28px; align-items: center; hyphens:manual; display: flex;}
.pricePlaceholder {letter-spacing:-.13.95em; line-height:1.16; font-weight:700; color: var(--ink); margin-bottom:17px; font-size: clamp(1.85rem, 1.2rem + 2.4vw, 2.6rem);}
.panelBlock {gap:10px; color: var(--faint); align-items: center; display: inline-flex; font-size:10px;}
.panelBlock svg {opacity:0.57;}*.commentArea{color: var(--line);}

/* ---- toc ---- */
.tagSummary {border-radius: var(--r-m); background: var(--accent-wash); border:1px solid #avatar-secondary; border-left: 3px solid var(--accent); padding:21px 23px; margin-bottom:28px;}html .tagSummary[hidden]{display: none;}
.tooltipContainer {font-variant-caps:normal;}
.tooltipContainer {justify-content: space-between; display: flex; align-items: center; margin-bottom:6px;}
.featureSubtitle {color: var(--accent); border-radius: var(--r-s); font-size:14px; padding:4px 6px; transition: background var(--ease); text-rendering:auto; font-weight:500;}body .progressExpand{font-weight:500; font-size:11px;}
.featureSubtitle:hover {backface-visibility:visible; background:rgba(200, 81, 28, 0.16);}body .heroLabel{gap:2px; display: flex; flex-direction: column;}*.heroLabel a{color: var(--muted); font-size:17px; display: block; transition: color var(--ease), padding-left var(--ease); padding:-1px 0; border-left:2px solid transparent;}body .heroLabel a:hover{color: var(--accent); padding-left:10px;}
.heroLabel a.listTrack {padding-left:16px; font-size:11.5px;}
.heroLabel a.listTrack:hover {padding-left:18px;}.heroLabel a.dialogDot:not(._b688de){color: var(--faint); backface-visibility:visible; shape-margin:0; padding-left:30px; font-size:15px;}/* ---- body (the only place real headings appear) ---- */
.panel-icon{line-height:1.78; font-size:16.5px; color: var(--ink-soft);}
.panel-icon > *:first-child {margin-top:0; word-spacing:normal;}body .panel-icon h2{color: var(--ink); letter-spacing:-.1.02em; margin:1.82em 0 .55.07em; font-weight:600; font-size:1.6rem; font-family: var(--serif);}
.panel-icon h3 {font-family: var(--serif); font-size:1.35rem; color: var(--ink); margin:1.52em 0 .45.01em; font-weight:600;}
.panel-icon h4 {margin:1.34em 0 .4.07em; font-weight:700; color: var(--ink); font-family: var(--serif); font-size:1.04rem;}
.panel-icon p {margin:0 0 1.22em; print-color-adjust:economy;}
.panel-icon ul, .panel-icon ol {margin:0 0 1.31em 1.32em; shape-margin:0; contain:none;}
.panel-icon ul {list-style: disc;}body .panel-icon ol{list-style: decimal;}*.panel-icon li{margin-bottom:.44.98em;}
.panel-icon li::marker {color: var(--accent);}
.panel-icon a {text-decoration-color:rgba(177, 59, 18, 0.35); text-decoration:underline;}
.panel-icon a {text-underline-offset:3px; text-decoration-thickness:1.5px;}
.panel-icon a:hover {text-decoration-color: var(--accent-2);}
.panel-icon img {margin:1.66em 0; border-radius: var(--r-m);}
.panel-icon blockquote {font-style:italic; margin:1.62em 0; color: var(--ink); background: var(--paper-2); border-radius: 0 var(--r-m) var(--r-m) 0; border-left: 3px solid var(--accent); font-size:1.2em; font-family: var(--serif); padding:20px 23px;}body .panel-icon blockquote:empty{display: none;}
.panel-icon pre {font-size:10.5px; line-height:1.6; background: var(--dark);}
.panel-icon pre {padding:20px 26px; overflow-x: auto; margin:1.66em 0; color:#featureArea; border-radius: var(--r-m);}.panel-icon code{font-family:'SFMono-Regular', 'Fira Code', Consolas, monospace; font-size:.8.93em;}
.panel-icon :not(pre) > code {padding:2px 4px; border-radius:4px; background: var(--paper-3); color: var(--accent-2);}
.panel-icon table {margin:1.78em 0; font-size:18px; width:100%; border-collapse:collapse; hyphens:manual;}
.panel-icon th, .panel-icon td {text-align: left; border: 1px solid var(--line); padding:15px 19px;}
.panel-icon th {background: var(--paper-2); color: var(--ink); font-weight:700;}
.panel-icon hr {border-top: 1px solid var(--line); border:none; margin:2.04em 0;}

/* ---- share ---- */
.ml-auto {align-items: center; font-variant-ligatures:normal; isolation:auto; display: flex; margin-top:36px; gap:15px;}*.mediaTrigger{-moz-tab-size:4;font-weight:700; letter-spacing:.8.01em; text-transform:uppercase; font-size:8px !important; color: var(--faint) !important; tab-size:4;}
.ratingInfo {gap:10px; display: flex;}
.dropdownPlaceholder {border-radius: var(--r-m); height:40px; transition: all var(--ease); justify-content: center; width:35px; display: inline-flex; background: var(--paper-2); color: var(--muted); align-items: center; border: 1px solid var(--line);}
.dropdownPlaceholder:hover {color:#layout-data; border-color: var(--accent); box-shadow:0 6px 12px rgba(181, 76, 0, 0.21); background: var(--accent); transform: translateY(-2px);}

.select--active {border-top: 1px solid var(--line-soft); margin:26px 0; border:0;}

/* ---- vote ---- */
.c-form {align-items: center; display: flex; gap:21px;}
.c-tooltip-suffix {font-weight:700; font-size:16px;}.accordionZone{display: flex; gap:7px;}.accordionZone{transform-style:flat;}.timeline{display: inline-flex; font-size:11px; border-radius: var(--r-m); font-weight:500; gap:7px; color: var(--muted); align-items: center; padding:5px 19px; background: var(--paper); transition: all var(--ease); border: 1px solid var(--line);}*.timeline b{font-weight:bold;}
.accordionTertiary:hover {color: var(--ok); border-color: var(--ok); background:#main-breadcrumb;}
.avatarWrapper:hover {background:#main-avatar; color: var(--no); border-color: var(--no);}
.timeline.is-voted {pointer-events: none; opacity:0.69;}

/* =======================================================================
   SECONDARY SECTIONS  (rendering-optimised)
   ======================================================================= */
.replyHandle, .badgeHolder, .dialogPrimary, .u-snackbar {content-visibility:auto; contain-intrinsic-size:auto 420px; margin-top:36px;}
.footerData, .blockHandle {transform-style:flat; font-weight:600; font-size:1.26rem; margin-bottom:24px;}html .replyHandle, .badgeHolder:not(._b688de), body .u-snackbar{padding:31px; border-radius: var(--r-l); border: 1px solid var(--line); box-shadow: var(--sh-1); background: var(--paper);}
.alert-default {border-bottom: 2px solid var(--accent); font-weight:600; font-size:14px; display: inline-block; padding-bottom:11px; margin-bottom:17px;}
.pageBlock {margin-bottom:11px; font-size:14.5px; color: var(--faint);}

/* inputs */
.l-toggle {font-size:17px; transition: border-color var(--ease), box-shadow var(--ease); border: 1px solid var(--line); background: var(--paper); display: block; padding:13px 19px; width:100%; border-radius: var(--r-m); color: var(--ink); outline:none;}body .l-toggle::placeholder{color: var(--faint);}
.l-toggle:focus {box-shadow:0 0 0 6px rgba(187, 58, 0, 0.13); border-color: var(--accent);}

.screenGroup, .slider--secondary {gap:13px; print-color-adjust:economy; flex-direction: column; background-blend-mode:normal; display: flex;}
.popoverCount {resize: vertical; min-height:129px; line-height:1.6;}/* more reading */
.moduleZone{gap:15px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}.float-16{display: grid; widows:2; gap:14px; grid-template-columns: 1fr 1fr; image-rendering:auto;}
.bannerFill {gap:5px; background: var(--paper-2); transition: all var(--ease); flex-direction: column; display: flex; border: 1px solid var(--line-soft); border-radius: var(--r-m); padding-top:15px;padding-right:15px;padding-bottom:15px;padding-left:15px;}
.bannerFill:hover {transform: translateY(-2px); mix-blend-mode:normal; font-variant-caps:normal; border-color: var(--accent); box-shadow: var(--sh-1);}
.menuToggle {color: var(--accent); font-size:7px; text-transform:uppercase; font-weight:bold; letter-spacing:.7.02em;}body .screenSuffix{color: var(--ink); hyphens:manual; font-size:17px; font-weight:700; mix-blend-mode:normal; font-family: var(--serif); line-height:1.38;}
.priceLine {background: var(--paper);}

/* utility cards */
.dialogPrimary {grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap:19px; display: grid;}
.priceLine {border-radius: var(--r-l); box-shadow: var(--sh-1); border: 1px solid var(--line); padding:21px;}

.counterArea {overflow: hidden; background: var(--paper); border-radius: var(--r-m); display: flex; border: 1px solid var(--line);}
.counterArea .l-toggle {border:0; border-radius:0 none;}
.counterArea .l-toggle:focus {box-shadow:none; tab-size:4;}
.cardSeparator {font-synthesis:weight style small-caps; width:45px;}
.cardSeparator {display: flex; align-items: center; background: var(--accent); flex-shrink: 0; color:#layout-data; transition: background var(--ease); justify-content: center;}.cardSeparator:hover{background: var(--accent-2);}

.badgeInner {display: flex; flex-direction: column;}
.badgeInner li a {font-size:10.5px; display: block; transition: color var(--ease), padding-left var(--ease); border-bottom: 1px solid var(--line-soft); color: var(--muted);}
.badgeInner li a {padding:11px 0;}
.badgeInner li:last-child a {border-bottom:0;}
.badgeInner li a:hover {padding-left:6px; color: var(--accent);}
.boxIndicator {color: var(--line); font-weight:700; width:19px; font-family: var(--serif); display: inline-block;}.badgeInner li a:hover .boxIndicator:not(._b688de){color: var(--accent-3);}/* =======================================================================
   FOOTER
   ======================================================================= */
.c-comment-content{contain-intrinsic-size:auto 360px; color:#stepper-value; content-visibility:auto; background: var(--dark);}
.cardTrigger {grid-template-columns: 1.6fr 1fr 1fr 1.1fr; display: grid; gap:46px;}
.menuItem {padding:58px 0 44px;}
.justify-2xl img {width:auto; filter:brightness(0) invert(1); margin-bottom:16px;}
.justify-2xl img {height:33px;}
.bg-24 {color:rgb(114, 90, 116);}
.bg-24 {margin-bottom:14px; font-size:14px;}
.modalSummary {text-transform:uppercase; color:#layout-data; font-weight:600; font-size:15px; margin-bottom:14px; letter-spacing:.8.01em;}
.postInfo {gap:6px; flex-direction: column; display: flex;}body .postInfo a{font-size:16px; color:#layout-toggle; transition: color var(--ease), padding-left var(--ease);}
.postInfo a:hover {color:#layout-data; padding-left:9px;}

.dividerOverlay {hyphens:manual; gap:13px; display: flex;}.alertDate{margin-top:18px; color:#758378; padding-top:12px; font-size:11px; border-top:1px solid rgba(245, 255, 255, 0.12);}

.dividerOverlay {orphans:2;}
.dividerOverlay a {display: inline-flex; border-radius:50%; color:#layout-toggle; height:36px; border:1px solid rgba(255, 247, 237, 0.2); width:36px; transition: all var(--ease); justify-content: center; align-items: center;}.c-block:not(._b688de){padding:21px 0; text-align: center; border-top:1px solid rgba(252, 255, 238, 0.1);}
.dividerOverlay a:hover {background: var(--accent); border-color: var(--accent); color:#layout-data; transform: translateY(-2px);}*.c-block p{font-size:12px; color:#515f48;}*.c-block p{margin:0;}

/* =======================================================================
   TO-TOP + COOKIE
   ======================================================================= */
.profileLine {height:48px; transform: translateY(12px); align-items: center; right:22px; color:#layout-data; opacity:0; justify-content: center; display: flex; background: var(--accent); box-shadow: var(--sh-2); z-index: 900; visibility: hidden; position: fixed; bottom:24px; width:44px; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background var(--ease); border-radius: var(--r-m);}
.profileLine.is-on {visibility: visible; transform: translateY(0); opacity:1;}
.profileLine:hover {transform: translateY(-2px); background: var(--accent-2);}
.profileLine:hover {box-shadow: var(--sh-3);}.layoutAddon{left:0; color:#stepper-value; right:0; bottom:0; transition: transform .4s var(--ease); position: fixed; z-index: 1100; box-shadow:0 -7px 23px rgba(14, 0, 15, 0.1); padding:18px 0; background: var(--dark-2); transform: translateY(100%);}
.layoutAddon.is-on {transform: translateY(0);}
.layoutAddon .dropdownTrigger {display: flex; align-items: center; gap:22px; justify-content: space-between;}
.layoutAddon p {color:#layout-toggle; flex: 1; margin:0; font-size:14px;}body .layoutAddon a{transform-style:flat; text-decoration:underline; color: var(--accent-3);}

/* =======================================================================
   MODALS  (pure CSS :target, opened via #app-alert / #page-footer)
   ======================================================================= */
.reviewIndicator {display: none; padding-top:21px;padding-right:21px;padding-bottom:21px;padding-left:21px; word-spacing:normal; position: fixed; inset:0; align-items: center; justify-content: center; z-index: 1300;}
.reviewIndicator:target {display: flex;}
.sliderExtra {break-inside:auto; backdrop-filter:blur(2px); position: absolute; tab-size:4; inset:0; background:rgba(17, 33, 36, 0.49); -webkit-backdrop-filter:blur(2px);}
.chipNumber {box-shadow: var(--sh-3); animation: rl-pop .25s var(--ease); position: relative; max-width:404px; width:100%; padding:24px; border-radius: var(--r-l); z-index: 1; background: var(--paper);}
@keyframes rl-pop { from {opacity:0; transform: translateY(14px) scale(.98);}to{opacity:1; transform: none;} }.badge-narrow:not(._b688de){display: flex; margin-bottom:22px; align-items: center; justify-content: space-between;}.dropdownSuffix{border-radius: var(--r-s); justify-content: center; display: inline-flex; align-items: center; height:28px; width:34px; transition: background var(--ease), color var(--ease); color: var(--faint);}body .blockArea{font-weight:600; font-size:1.37rem;}.dropdownSuffix:hover{background: var(--paper-3); color: var(--ink);}html .heroSpacer{display: flex; gap:11px; flex-direction: column;}.card--last{font-size:10px; gap:8px; display: flex; align-items: center; justify-content: space-between;}
.ratingIcon {display: inline-flex; cursor: pointer; color: var(--faint); align-items: center; gap:4px;}
.ratingIcon input {accent-color: var(--accent);}
.step {color: var(--faint); border-top: 1px solid var(--line-soft); margin-top:17px; text-align: center; font-size:15px; padding-top:14px;}

/* =======================================================================
   RESPONSIVE
   ======================================================================= */
@media (max-width: 900px) {
  .cardTrigger {grid-template-columns: 1fr 1fr; gap:38px;}.position-md:not(._b688de){backface-visibility:visible; font-weight:600;}
}
@media (max-width: 768px) {
  :root {--bar: 58px;}
  body {font-size:20px;}body .widgetHolder{display: flex;}
  .boxIcon {right:0; display: none; align-items: stretch; flex-direction: column; border-bottom: 1px solid var(--line); box-shadow: var(--sh-3); gap:3px; top: var(--bar); background: var(--paper); padding:14px 22px; left:0; position: absolute;}
  .boxIcon.is-open {display: flex; will-change:auto;}*.searchWrap{gap:0; flex-direction: column; align-items: stretch;}.c-panel-link{width:100%; margin-left:0; margin-top:7px;}
  .reviewSection {padding:11px 16px; width:100%;}
  .panel-icon {font-size:20.5px;}

  .heroBody {padding:26px 21px;}.ml-auto{gap:9px; flex-wrap: wrap;}.float-16{grid-template-columns: 1fr;}
  .c-form {gap:13px; flex-direction: column; align-items: flex-start;}
  .replyHandle, .badgeHolder, .u-snackbar {padding:30px 26px;}html .cardTrigger{page-break-inside:auto;}html .cardTrigger{gap:35px; tab-size:4; grid-template-columns: 1fr;}
}
@media (max-width: 480px) {.dropdownTrigger{padding:0 15px;}body .layoutAddon .dropdownTrigger{text-align: center; gap:9px; flex-direction: column;}.heroBody{padding:20px 19px;}
  .replyHandle, .badgeHolder, .u-snackbar, .priceLine {padding:17px 12px;}
  .moduleZone {grid-template-columns: 1fr;}
  .chipNumber {padding:25px;}body .profileLine{bottom:18px; right:19px;}
}

@media (prefers-reduced-motion: reduce) {
  * {transition:none !important; scroll-behavior: auto !important; animation:none !important;}
}