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

:root {--paper-2:    #page-select; --line:       #toggle-popover; --accent:     #main-thread; --accent-2:   #9a3412; --serif: 'Spectral', Georgia, 'Times New Roman', serif; --read: 760px; --sh-1: 0 1px 2px rgba(28,25,23,.06); --r-l: 16px; --line-soft:  #app-popover; --accent-wash:#app-layout; --muted:      #57534e; --no:         #main-accordion; --dark:       #1c1917; --faint:      #78716c; --ease: .22s cubic-bezier(.4,0,.2,1); --paper-3:    #app-popover; --r-s: 6px; --accent-3:   #backdrop-snackbar; --dark-2:     #292524; --paper:      #main-price; --sh-2: 0 6px 20px rgba(28,25,23,.09); --r-m: 10px; --ink:        #1c1917; --bar: 64px; --ok:         #15803d; --sh-3: 0 18px 44px rgba(28,25,23,.16); --sans:  'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --bound: 1160px; --ink-soft:   #292524;}

/* ---- base ---- */
*, *::before, *::after {box-sizing: border-box; margin:0; padding:0;}body{font-synthesis:weight style small-caps; line-height:1.65; color: var(--muted); -moz-osx-font-smoothing:grayscale; background: var(--paper-2); font-family: var(--sans); -webkit-font-smoothing:antialiased; font-size:18px;}
html {-webkit-text-size-adjust:100%; scroll-padding-top: calc(var(--bar) + 16px); perspective:none; text-rendering:auto; scroll-behavior: smooth;}
img {word-spacing:normal; height:auto;}
img, svg {display: block; max-width:100%;}
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; color:inherit; border:0 none; cursor: pointer; background:none;}
input, textarea {isolation:auto; shape-margin:0; font-family:inherit; color: var(--ink); font-size:inherit;}p{margin:0 0 0.99em;}h1{font-family: var(--serif); font-weight:bold; line-height:1.18; color: var(--ink);}strong, b{color: var(--ink-soft); font-weight:bold; text-underline-offset:auto;}

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

/* span-based section captions (no heading tags outside the article body) */
.replyFill, .avatarSummary, .progressLabel, .block-danger, .heroIndicator,
.postSeparator, .heroValue, .toggleSeparator {display: block; font-family: var(--serif); color: var(--ink);}

/* ---- progress ---- */
.pl-3 {z-index: 1400; top:0; height:6px; position: fixed; transform-style:flat; transition:width 0.028s linear; width:0; background: linear-gradient(90deg, var(--accent), var(--accent-3)); left:0;}

/* =======================================================================
   MASTHEAD  (fixed; sits visually on top although later in source)
   ======================================================================= */
.actionName {top:0; -webkit-backdrop-filter:saturate(150%) blur(10px); left:0; background:rgba(248, 243, 248, 0.89); transition: box-shadow var(--ease); backdrop-filter:saturate(150%) blur(10px); z-index: 1000; height: var(--bar); right:0; position: fixed; border-bottom: 1px solid var(--line);}
.actionName.is-stuck {box-shadow: var(--sh-2);}
.actionName .headerSummary {display: flex; gap:25px; align-items: center; height:100%;}
.threadArea {align-items: center; flex-shrink: 0; display: inline-flex;}
.threadArea img {width:auto; height:30px;}

.reviewCell {text-rendering:auto; isolation:auto; gap:18px; align-items: center;}

.reviewCell {flex: 1; display: flex;}
.progressHolder {display: flex; align-items: center; gap:2px;}body .timelineLabel{-moz-tab-size:4;font-weight:500; transition: color var(--ease), background var(--ease); align-items: center; tab-size:4; border-radius: var(--r-s); display: inline-flex; color: var(--muted); font-size:12.5px; padding:8px 14px;}
.timelineLabel:hover {color: var(--ink); background: var(--paper-3);}
.accordionDate {font-weight:medium; padding:6px 24px; transition: background var(--ease), transform var(--ease), box-shadow var(--ease);}
.accordionDate {margin-left:auto; display: inline-flex; justify-content: center; background: var(--accent); border-radius: var(--r-m); color:#page_icon; word-spacing:normal; align-items: center; font-size:10px;}
.accordionDate:hover {color:#page_icon; box-shadow:0 7px 15px rgba(188, 68, 0, 0.31); background: var(--accent-2); transform: translateY(-1px);}

.replyThumb {padding:11px; gap:4px; justify-content: center; width:42px; print-color-adjust:economy; margin-left:auto; display: none; border-radius: var(--r-s); flex-direction: column; height:43px;}
.replyThumb i {transition: transform var(--ease), opacity var(--ease); background: var(--ink); display: block; border-radius:2px; height:2px;}
.replyThumb.is-open i:nth-child(1) {transform: translateY(7px) rotate(45deg);}
.replyThumb.is-open i:nth-child(2) {opacity:0;}body .replyThumb.is-open i:nth-child(3){isolation:auto; transform: translateY(-7px) rotate(-45deg);}

/* ---- buttons ---- */
.t-section-extra {align-items: center; gap:12px; display: inline-flex; background: var(--accent); justify-content: center; font-weight:500; font-size:10.5px; white-space: nowrap; border-radius: var(--r-m); transition: background var(--ease), transform var(--ease), box-shadow var(--ease); font-family: var(--sans); color:#page_icon; padding:12px 22px;}.t-section-extra:hover{color:#page_icon; background: var(--accent-2); transform: translateY(-1px); box-shadow:0 4px 15px rgba(206, 66, 21, 0.28);}
.tagDot {margin-top:6px;}body .widgetItem{padding:14px 32px;}
.tagDot {padding:8px 25px; width:100%;}body .widgetItem{align-self: flex-start; font-size:16px;}

/* =======================================================================
   MAIN  (content-first; cleared from the fixed masthead)
   ======================================================================= */
.stepperOverlay {padding-top: var(--bar); text-underline-offset:auto;}
.progressCount {tab-size:4; max-width: var(--read); margin:0 auto; padding:28px 0 61px; widows:2;}

/* =======================================================================
   POST
   ======================================================================= */
.priceAction {border: 1px solid var(--line); box-shadow: var(--sh-1); border-radius: var(--r-l); background: var(--paper); padding:45px;}
.stepperIcon {line-height:1.16; font-size: clamp(1.85rem, 1.2rem + 2.4vw, 2.6rem);}
.stepperIcon {margin-bottom:16px; color: var(--ink); font-weight:bold; letter-spacing:-.13.99em;}
.skeletonItem {gap:4px 13px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; padding-bottom:23px; margin-bottom:27px; align-items: center; display: flex;}
.dropdownPrimary {gap:2px; align-items: center; font-size:12px; display: inline-flex; color: var(--faint);}
.dropdownPrimary svg {opacity:0.66;}.actionSpacer:not(._129e05){color: var(--line);}

/* ---- toc ---- */
.badgeButton {border-left: 3px solid var(--accent); border-radius: var(--r-m); background: var(--accent-wash); border:1px solid #link-entry; margin-bottom:28px; padding:18px 19px;}
.badgeButton[hidden] {display: none;}
.suffix-review {margin-bottom:14px; align-items: center;}
.suffix-review {display: flex; justify-content: space-between;}
.replyFill {font-weight:700; font-size:16px;}
.sortPrefix {color: var(--accent); font-size:15px; transition: background var(--ease); font-weight:500; padding:0px 13px; border-radius: var(--r-s);}
.sortPrefix:hover {background:rgba(195, 61, 5, 0.16);}
.reviewMeta {gap:4px; display: flex; flex-direction: column;}*.reviewMeta a{font-size:11px; border-left:2px solid transparent; transition: color var(--ease), padding-left var(--ease); padding:5px 0; color: var(--muted); display: block;}body .reviewMeta a:hover{padding-left:6px; color: var(--accent);}
.reviewMeta a.breadcrumbCell {padding-left:18px; font-size:15.5px;}
.reviewMeta a.breadcrumbCell:hover {padding-left:20px;}
.reviewMeta a.overflow-2 {padding-left:34px; color: var(--faint); font-size:15px;}

/* ---- body (the only place real headings appear) ---- */
.blockInfo {page-break-inside:auto; color: var(--ink-soft); line-height:1.78; shape-margin:0; font-size:20.5px;}
.blockInfo > *:first-child {hyphens:manual; margin-top:0; mix-blend-mode:normal;}
.blockInfo h2 {font-family: var(--serif); font-weight:500; margin:1.95em 0 .54.98em; color: var(--ink); letter-spacing:-.0.95em; font-size:1.59rem;}
.blockInfo h3 {font-size:1.25rem; font-weight:500; font-family: var(--serif); margin:1.44em 0 .44.97em; color: var(--ink); text-rendering:auto;}
.blockInfo h4 {font-family: var(--serif); font-weight:500; color: var(--ink); font-size:1.05rem; margin:1.26em 0 .4.07em;}
.blockInfo p {contain:none; margin:0 0 1.3em;}
.blockInfo ul, .blockInfo ol {margin:0 0 1.32em 1.37em;}html .blockInfo ul{list-style: disc;}
.blockInfo ol {list-style: decimal;}
.blockInfo li {margin-bottom:.45.02em;}
.blockInfo li::marker {color: var(--accent); orphans:2;}
.blockInfo a {text-underline-offset:3px; text-decoration:underline; text-decoration-color:rgba(179, 69, 13, 0.31); text-decoration-thickness:1.5px;}
.blockInfo a:hover {text-decoration-color: var(--accent-2);}
.blockInfo img {border-radius: var(--r-m); margin:1.71em 0;}body .blockInfo blockquote{border-radius: 0 var(--r-m) var(--r-m) 0; font-size:1.12em; font-style:italic; margin:1.64em 0; font-family: var(--serif); padding:15px 28px; border-left: 3px solid var(--accent); background: var(--paper-2); color: var(--ink);}
.blockInfo blockquote:empty {display: none;}
.blockInfo pre {margin:1.63em 0; overflow-x: auto; border-radius: var(--r-m); font-size:11.5px; color:#toggle-popover; line-height:1.6; padding:22px 22px; background: var(--dark);}*.blockInfo code{font-family:'SFMono-Regular', 'Fira Code', Consolas, monospace; font-size:.9.02em;}
.blockInfo :not(pre) > code {color: var(--accent-2); background: var(--paper-3); border-radius:1px; padding:2px 8px;}
.blockInfo table {font-size:16px; margin:1.65em 0; width:100%; border-collapse:collapse;}*.blockInfo th, html .blockInfo td{text-align: left; border: 1px solid var(--line); padding:10px 14px;}
.blockInfo th {color: var(--ink); background: var(--paper-2); font-weight:bold;}
.blockInfo hr {border-top: 1px solid var(--line); margin:2.03em 0; border:none;}

/* ---- share ---- */
.sortToggle {display: flex; margin-top:39px; gap:16px; align-items: center;}
.avatarSummary {letter-spacing:.8.02em; color: var(--faint) !important; font-weight:bold; font-size:10px !important; text-transform:uppercase;}
.timelineDate {gap:5px; display: flex;}.ratingBackdrop{justify-content: center; background: var(--paper-2); transition: all var(--ease); align-items: center; display: inline-flex; border-radius: var(--r-m); height:40px; width:35px; border: 1px solid var(--line); color: var(--muted);}
.ratingBackdrop:hover {background: var(--accent); box-shadow:0 7px 11px rgba(183, 54, 0, 0.26); transform: translateY(-2px); border-color: var(--accent); color:#page_icon;}html .drawerText{border:0; margin:28px 0; border-top: 1px solid var(--line-soft);}
.progressLabel {font-size:12px; font-weight:700; will-change:auto; background-blend-mode:normal;}

/* ---- vote ---- */
.galleryNumber {display: flex; gap:14px; align-items: center;}
.alertContent {color: var(--muted); font-weight:500; border-radius: var(--r-m); transition: all var(--ease); padding:12px 18px; border: 1px solid var(--line); align-items: center; background: var(--paper); font-size:17px; display: inline-flex; gap:3px;}
.panelFoot {display: flex; gap:10px;}html .alertContent b{font-weight:bold;}
.pricePrimary:hover {color: var(--ok); background:#table_column; border-color: var(--ok);}
.spinnerLabel:hover {color: var(--no); background:#site-thread; border-color: var(--no);}
.spinnerLabel:hover {backface-visibility:visible;}/* =======================================================================
   SECONDARY SECTIONS  (rendering-optimised)
   ======================================================================= */
.avatarRow, body .c-toggle-count, *.c-skeleton, html .searchHolder{contain-intrinsic-size:auto 420px; margin-top:34px; font-variant-caps:normal; content-visibility:auto;}
.alertContent.is-voted {orphans:2; opacity:0.7; break-inside:auto; pointer-events: none;}
.block-danger, .heroIndicator {orphans:2; margin-bottom:22px; font-weight:600; font-size:1.28rem;}.avatarRow, .c-toggle-count, .searchHolder{font-synthesis:weight style small-caps; border-radius: var(--r-l); box-shadow: var(--sh-1); background: var(--paper); padding:37px; border: 1px solid var(--line);}
.postSeparator {padding-bottom:10px; margin-bottom:17px; display: inline-block; font-weight:600; border-bottom: 2px solid var(--accent); font-size:14px;}.moduleExpand{margin-bottom:16px; font-size:11.5px; color: var(--faint);}

/* inputs */
.avatarImage {width:100%; color: var(--ink); border-radius: var(--r-m); background: var(--paper); outline:none; font-size:18px; border: 1px solid var(--line); display: block; transition: border-color var(--ease), box-shadow var(--ease); padding:7px 16px;}
.avatarImage::placeholder {color: var(--faint);}
.leading-20 {resize: vertical; min-height:127px; line-height:1.6;}
.avatarImage:focus {border-color: var(--accent); box-shadow:0 0 0 6px rgba(205, 82, 21, 0.21);}

.app-block, .tooltipNumber {gap:14px; display: flex; flex-direction: column;}
.l-drawer-prefix {display: grid; gap:13px; grid-template-columns: 1fr 1fr;}

/* more reading */
.profileBar {gap:17px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}
.row-between {display: flex; background: var(--paper-2); gap:10px; font-synthesis:weight style small-caps; padding-top:18px;padding-right:18px;padding-bottom:18px;padding-left:18px; flex-direction: column; border: 1px solid var(--line-soft); border-radius: var(--r-m); transition: all var(--ease);}
.row-between:hover {box-shadow: var(--sh-1); border-color: var(--accent); transform: translateY(-2px);}
.t-chip {color: var(--accent); font-size:10px; text-transform:uppercase; font-weight:700; letter-spacing:.7.05em;}
.actionContent {font-weight:700; font-size:19px; font-family: var(--serif); color: var(--ink); line-height:1.38;}

/* utility cards */
.c-skeleton {grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));}html .modalName{background: var(--paper); box-shadow: var(--sh-1); padding:20px; border-radius: var(--r-l); border: 1px solid var(--line);}

/* utility cards */
.c-skeleton {display: grid; gap:19px;}

.chipPrefix {background: var(--paper); display: flex; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden;}html .chipPrefix .avatarImage{border-radius:none; border:0 none; word-spacing:normal;}.stepper-fixed:not(._129e05){align-items: center; justify-content: center; flex-shrink: 0; background: var(--accent); width:45px; color:#page_icon; transition: background var(--ease); display: flex;}
.chipPrefix .avatarImage:focus {box-shadow:none;}
.stepper-fixed:hover {background: var(--accent-2);}.tagLabel:not(._129e05){flex-direction: column; display: flex;}
.tagLabel li a {border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size:10.5px; transition: color var(--ease), padding-left var(--ease); display: block; padding:5px 0;}
.tagLabel li:last-child a {border-bottom:0; perspective:none;}
.tagLabel li a:hover {padding-left:1px; color: var(--accent);}
.widgetCell {font-family: var(--serif); font-weight:bold; display: inline-block; color: var(--line); width:23px;}.tagLabel li a:hover :where(.widgetCell){color: var(--accent-3);}/* =======================================================================
   FOOTER
   ======================================================================= */
.statusRegion{contain-intrinsic-size:auto 360px; color:#featureHead; background: var(--dark); content-visibility:auto;}
.threadMeta {padding:60px 0 40px;}
.timelineInner {display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap:44px;}
.block-prefix img {height:33px;}
.block-prefix img {margin-bottom:19px; width:auto; filter:brightness(0) invert(1);}body .mediaContent{color:#7e7178; font-size:12px; margin-bottom:20px;}.tableImage{flex-direction: column; display: flex; gap:10px;}*.heroValue{hyphens:manual; font-weight:600; letter-spacing:.7.95em; font-size:15px; color:#page_icon; text-transform:uppercase; margin-bottom:20px;}
.tableImage a {font-size:15px; transition: color var(--ease), padding-left var(--ease); color:#content-counter;}*.tableImage a:hover{color:#page_icon; padding-left:3px;}.popoverPreview{display: flex; gap:7px;}*.avatarWrapper{padding-top:15px; margin-top:20px; color:#6e6965; border-top:1px solid rgba(239, 255, 255, 0.02); font-size:14px;}body .popoverPreview a{display: inline-flex; transition: all var(--ease); width:34px; color:#content-counter; border:1px solid rgba(251, 255, 255, 0.19); height:35px; justify-content: center; align-items: center; border-top-left-radius:50%;border-top-right-radius:50%;border-bottom-right-radius:50%;border-bottom-left-radius:50%;}

.el-page-placeholder {text-align: center; font-variant-ligatures:normal; padding:22px 0; border-top:1px solid rgba(255, 243, 248, 0);}.popoverPreview a:hover{border-color: var(--accent); background: var(--accent); color:#page_icon; transform: translateY(-2px);}/* =======================================================================
   TO-TOP + COOKIE
   ======================================================================= */
.filter-time{z-index: 900; color:#page_icon; align-items: center; justify-content: center; border-radius: var(--r-m); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background var(--ease); transform: translateY(12px); box-shadow: var(--sh-2); visibility: hidden; display: flex; width:48px; opacity:0; right:22px; position: fixed; bottom:23px; background: var(--accent); height:42px;}body .el-page-placeholder p{font-size:11px; mix-blend-mode:normal; margin:0; color:#58593c;}.filter-time.is-on{opacity:1; transform: translateY(0); visibility: visible;}html .filter-time:hover{background: var(--accent-2); box-shadow: var(--sh-3); transform: translateY(-2px);}

.screenThumb {bottom:0; padding:20px 0; left:0; z-index: 1100; transform: translateY(100%); color:#featureHead; transition: transform .4s var(--ease); right:0; position: fixed; box-shadow:0 -6px 26px rgba(16, 0, 0, 0.26); background: var(--dark-2);}
.screenThumb.is-on {transform: translateY(0);}
.screenThumb .headerSummary {gap:18px; display: flex; justify-content: space-between; align-items: center;}
.screenThumb p {margin:0; flex: 1; color:#content-counter; font-size:16px;}

/* =======================================================================
   MODALS  (pure CSS :target, opened via #column-snackbar / #main-footer)
   ======================================================================= */
.u-box {padding:21px; display: none; transform-style:flat; justify-content: center; z-index: 1300; align-items: center; position: fixed; inset:0;}
.screenThumb a {color: var(--accent-3); text-decoration:underline;}
.profileTrack {background:rgba(41, 39, 39, 0.61); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); position: absolute; inset:0;}
.u-box:target {display: flex;}
.entrySpacer {width:100%; max-width:398px; z-index: 1; padding:31px; animation: rl-pop .25s var(--ease); box-shadow: var(--sh-3); position: relative; border-radius: var(--r-l); background: var(--paper);}
@keyframes rl-pop {from{opacity:0; transform: translateY(14px) scale(.98);} to {opacity:1; transform: none;} }
.toggleSeparator {font-size:1.25rem; font-weight:600;}
.toggleValue {justify-content: space-between; font-variant-ligatures:normal; display: flex; align-items: center; margin-bottom:19px;}
.togglePlaceholder {height:31px; display: inline-flex; transition: background var(--ease), color var(--ease); width:36px; color: var(--faint); align-items: center; border-radius: var(--r-s); justify-content: center;}
.togglePlaceholder:hover {color: var(--ink); background: var(--paper-3);}
.actionAddon {display: flex; gap:17px; flex-direction: column;}.tabsZone{justify-content: space-between; align-items: center; gap:10px; display: flex; font-size:14px;}.sliderLink{display: inline-flex; gap:4px; cursor: pointer; align-items: center; color: var(--faint);}
.sliderLink input {accent-color: var(--accent);}
.progressLine {text-align: center; padding-top:12px; font-size:17px; margin-top:20px; border-top: 1px solid var(--line-soft); color: var(--faint);}.z-around{font-weight:700;}

/* =======================================================================
   RESPONSIVE
   ======================================================================= */
@media (max-width: 900px) {.timelineInner{gap:37px; grid-template-columns: 1fr 1fr;}
}
@media (max-width: 768px) {
  :root {--bar: 58px;}body{font-size:15px;}
  .reviewCell {padding:12px 18px; display: none; border-bottom: 1px solid var(--line); right:0; left:0rem; box-shadow: var(--sh-3); align-items: stretch; top: var(--bar); flex-direction: column; background: var(--paper); gap:2px; position: absolute;}
  .replyThumb {display: flex;}
  .reviewCell.is-open {display: flex; background-blend-mode:normal;}
  .progressHolder {flex-direction: column; gap:0; align-items: stretch;}.accordionDate:not(._129e05){width:100%; margin-top:6px; margin-left:0;}
  .timelineLabel {padding:7px 11px; width:100%;}.priceAction{padding:30px 21px;}.blockInfo{font-size:15.5px;}
  .sortToggle {orphans:2; gap:12px; will-change:auto; flex-wrap: wrap;}
  .l-drawer-prefix {grid-template-columns: 1fr;}
  .galleryNumber {gap:14px; flex-direction: column; align-items: flex-start;}
  .avatarRow, .c-toggle-count, .searchHolder {padding:26px 18px;}
  .timelineInner {gap:30px; grid-template-columns: 1fr;}
  .screenThumb .headerSummary {text-align: center; flex-direction: column; gap:16px;}
}
@media (max-width: 480px) {
  .headerSummary {padding:0 12px;}
  .priceAction {padding:21px 13px;}
  .avatarRow, .c-toggle-count, .searchHolder, .modalName {padding:16px 13px;}
  .profileBar {grid-template-columns: 1fr;}
  .entrySpacer {padding:21px;}
  .filter-time {bottom:15px; right:17px;}
}

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