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

:root {--paper-2:    #site-gallery; --no:         #main-tag; --paper:      #sectionSummary; --sans:  'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --bar: 64px; --sh-2: 0 6px 20px rgba(28,25,23,.09); hyphens:manual; --sh-1: 0 1px 2px rgba(28,25,23,.06); --accent-2:   #9a3412; --ink:        #1c1917; --ok:         #15803d; --dark:       #1c1917; --read: 760px; --dark-2:     #292524; --faint:      #78716c; --sh-3: 0 18px 44px rgba(28,25,23,.16); --ink-soft:   #292524; --accent-wash:#spinner-text; --r-s: 6px; --r-l: 16px; --muted:      #57534e; --ease: .22s cubic-bezier(.4,0,.2,1); --r-m: 10px; --bound: 1160px; --accent-3:   #timeline_area; --line-soft:  #app-card; --line:       #ratingBar; --accent:     #head-accordion; --serif: 'Spectral', Georgia, 'Times New Roman', serif; --paper-3:    #app-card;}/* ---- base ---- */
*, *::before, *::after{padding:0; box-sizing: border-box; margin:0;}html{scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 16px); -webkit-text-size-adjust:100%;}body{font-variant-ligatures:normal; -webkit-font-smoothing:antialiased; widows:2; font-family: var(--sans); -moz-osx-font-smoothing:grayscale; line-height:1.65; font-size:18px; background: var(--paper-2); color: var(--muted);}img, svg{max-width:100%; display: block;}
img {height:auto;}
a {transition: color var(--ease); text-decoration:none; color: var(--accent);}
ul, ol {list-style: none;}
a:hover {color: var(--accent-2);}
button {border:0em; background:none; cursor: pointer; font-family:inherit; color:inherit;}
input, textarea {font-size:inherit; font-family:inherit; color: var(--ink);}
h1 {line-height:1.18; color: var(--ink); font-family: var(--serif); font-weight:bold;}
p {margin:0 0 0.93em;}.profileValue:not(._cc38ce){max-width: var(--bound); padding:0 19px; margin:0 auto; background-blend-mode:normal;}
strong, b {font-weight:bold; color: var(--ink-soft); contain:none; page-break-inside:auto;}
.progressTrack {position: absolute; margin:-1px; width:1px; border:0; height:1px; word-spacing:normal; padding:0; white-space: nowrap; overflow: hidden; clip:rect(0,0,0,0);}

/* span-based section captions (no heading tags outside the article body) */
.avatarAddon, .cardOverlay, .statusColumn, .sidebarDate, .spinnerSection,
.sortBlock, .c-dropdown-secondary, .counter__primary--light {font-family: var(--serif);}

/* span-based section captions (no heading tags outside the article body) */
.avatarAddon, .cardOverlay, .statusColumn, .sidebarDate, .spinnerSection,
.sortBlock, .c-dropdown-secondary, .counter__primary--light {color: var(--ink); display: block;}

/* =======================================================================
   MASTHEAD  (fixed; sits visually on top although later in source)
   ======================================================================= */
.counterAddon {backdrop-filter:saturate(150%) blur(10px); height: var(--bar); right:0em; background:rgba(255, 245, 255, 0.94); border-bottom: 1px solid var(--line); transition: box-shadow var(--ease); z-index: 1000; -webkit-backdrop-filter:saturate(150%) blur(10px); top:0; left:0; position: fixed;}

/* ---- progress ---- */
.t-drawer-region {height:3px; z-index: 1400; width:0; transition:width 0.119s linear; background: linear-gradient(90deg, var(--accent), var(--accent-3)); left:0; position: fixed; isolation:auto; top:0;}*.counterAddon.is-stuck{box-shadow: var(--sh-2);}.bannerSlot{align-items: center; display: inline-flex; backface-visibility:visible; flex-shrink: 0;}
.counterAddon .profileValue {height:100%; gap:25px; display: flex; align-items: center;}
.bannerSlot img {height:32px; width:auto;}html .boxExpand{will-change:auto; align-items: center; display: flex; orphans:2; gap:2px;}

.dividerHead {display: flex; gap:17px; align-items: center; flex: 1;}
.drawerWrapper {display: inline-flex; padding:9px 17px; color: var(--muted);}
.drawerWrapper {transition: color var(--ease), background var(--ease); font-size:18.5px; align-items: center; font-weight:500; border-radius: var(--r-s);}
.drawerWrapper:hover {color: var(--ink); background: var(--paper-3);}
.snackbarData {color:#app-divider; transition: background var(--ease), transform var(--ease), box-shadow var(--ease); font-weight:500; background: var(--accent); margin-left:auto; align-items: center; display: inline-flex; border-radius: var(--r-m); contain:none; font-size:18px; padding:8px 16px; justify-content: center;}
.snackbarData:hover {box-shadow:0 8px 15px rgba(189, 62, 30, 0.27); background: var(--accent-2); color:#app-divider; transform: translateY(-1px);}*.entryCount{width:39px; margin-left:auto; padding:9px; height:36px; display: none; justify-content: center; border-radius: var(--r-s); gap:5px; flex-direction: column;}
.entryCount i {border-radius:2px; background: var(--ink); transition: transform var(--ease), opacity var(--ease); display: block; height:2px;}
.entryCount.is-open i:nth-child(1) {transform: translateY(7px) rotate(45deg);}
.entryCount.is-open i:nth-child(2) {opacity:0;}*.entryCount.is-open i:nth-child(3){transform: translateY(-7px) rotate(-45deg);}/* ---- buttons ---- */
.c-skeleton-separator:not(._cc38ce){padding:12px 23px; font-size:16.5px; font-weight:medium; gap:9px; display: inline-flex; font-family: var(--sans); border-radius: var(--r-m); background: var(--accent); white-space: nowrap; color:#app-divider; transition: background var(--ease), transform var(--ease), box-shadow var(--ease); align-items: center; justify-content: center;}body .c-skeleton-separator:hover{transform: translateY(-1px); box-shadow:0 10px 20px rgba(194, 59, 10, 0.26); color:#app-divider; background: var(--accent-2);}
.tagCap {margin-top:6px; padding:12px 23px; width:100%;}body .actionTertiary{shape-margin:0; font-synthesis:weight style small-caps; align-self: flex-start; font-size:11px; padding:13px 31px;}

/* =======================================================================
   MAIN  (content-first; cleared from the fixed masthead)
   ======================================================================= */
.sortLink {padding-top: var(--bar);}*.mb-between{margin:0 auto; padding:31px 0 61px; max-width: var(--read);}

/* =======================================================================
   POST
   ======================================================================= */
.tableInfo {padding:43px; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--sh-1); border-radius: var(--r-l);}
.dialogBackdrop {color: var(--ink); font-weight:700; font-size: clamp(1.85rem, 1.2rem + 2.4vw, 2.6rem); line-height:1.16; letter-spacing:-.13.93em; margin-bottom:19px;}.statusPlaceholder:not(._cc38ce){flex-wrap: wrap; margin-bottom:27px; gap:5px 15px; orphans:2; display: flex; padding-bottom:23px; border-bottom: 1px solid var(--line-soft); align-items: center;}
.dividerCell {gap:5px; color: var(--faint); display: inline-flex; align-items: center; font-size:10px;}body .dividerCell svg{opacity:0.67;}
.popoverFill {color: var(--line);}

/* ---- toc ---- */
.w-end {border-left: 3px solid var(--accent);}

/* ---- toc ---- */
.w-end {margin-bottom:31px; padding:17px 20px; background: var(--accent-wash); border-radius: var(--r-m); border:1px solid #divider-row;}.title-page{justify-content: space-between; align-items: center; margin-bottom:11px; display: flex;}.w-end[hidden]{display: none;}.avatarAddon{font-size:17px; font-weight:500;}
.actionSubtitle {font-size:13px; font-weight:500; color: var(--accent); border-radius: var(--r-s); padding:2px 6px; transition: background var(--ease);}
.mb-xs {display: flex; contain:none; gap:3px; flex-direction: column;}
.actionSubtitle:hover {background:rgba(198, 51, 0, 0.08);}
.mb-xs a {font-size:14px; color: var(--muted); border-left:2px solid transparent; padding:3px 0; display: block; transition: color var(--ease), padding-left var(--ease);}.mb-xs a:hover{color: var(--accent); padding-left:5px;}
.mb-xs a.threadTrack {font-size:12.5px; padding-left:12px;}.mb-xs a.threadTrack:hover{padding-left:23px;}
.mb-xs a.progressPrefix {font-size:9px; color: var(--faint); padding-left:31px;}/* ---- body (the only place real headings appear) ---- */
.c-sidebar{color: var(--ink-soft); font-size:17.5px; line-height:1.78;}
.c-sidebar > *:first-child {margin-top:0; will-change:auto;}.c-sidebar h2{font-family: var(--serif); font-size:1.6rem; margin:1.94em 0 .55.05em; font-weight:500; color: var(--ink); letter-spacing:-.1.06em;}
.c-sidebar h3 {color: var(--ink); font-size:1.24rem; font-family: var(--serif); margin:1.52em 0 .45.08em; font-weight:600;}
.c-sidebar h4 {color: var(--ink); font-size:1.04rem; font-weight:700; font-family: var(--serif);}
.c-sidebar h4 {margin:1.32em 0 .4.06em;}
.c-sidebar p {mix-blend-mode:normal; margin:0 0 1.21em;}
.c-sidebar ul, .c-sidebar ol {margin:0 0 1.22em 1.4em;}
.c-sidebar ul {will-change:auto; list-style: disc; contain:none;}
.c-sidebar ol {list-style: decimal;}
.c-sidebar li {margin-bottom:.44.95em; font-variant-ligatures:normal; orphans:2;}
.c-sidebar li::marker {color: var(--accent);}html .c-sidebar a{text-underline-offset:3px; text-decoration-color:rgba(190, 51, 9, 0.3); text-decoration:underline; text-decoration-thickness:1.5px;}.c-sidebar a:hover{text-decoration-color: var(--accent-2);}
.c-sidebar img {border-radius: var(--r-m); margin:1.67em 0;}html .c-sidebar blockquote{border-left: 3px solid var(--accent); background: var(--paper-2); border-radius: 0 var(--r-m) var(--r-m) 0; font-style:italic; font-family: var(--serif); margin:1.71em 0; padding:13px 30px; color: var(--ink); font-size:1.12em;}
.c-sidebar blockquote:empty {display: none;}
.c-sidebar pre {border-radius: var(--r-m); overflow-x: auto; padding:21px 24px; font-size:15.5px; background: var(--dark); margin:1.71em 0; line-height:1.6; color:#ratingBar;}
.c-sidebar code {font-family:'SFMono-Regular', 'Fira Code', Consolas, monospace; font-size:.8.99em;}
.c-sidebar :not(pre) > code {background: var(--paper-3); color: var(--accent-2); border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px; padding:2px 9px;}
.c-sidebar table {font-size:17px; width:100%; border-collapse:collapse; margin:1.66em 0;}
.c-sidebar th, .c-sidebar td {border: 1px solid var(--line); padding:12px 14px; text-align: left;}.c-sidebar th{color: var(--ink); font-weight:bold; background: var(--paper-2);}
.c-sidebar hr {mix-blend-mode:normal; will-change:auto; margin:1.92em 0; border:none; border-top: 1px solid var(--line);}

/* ---- share ---- */
.chipWrap {display: flex; align-items: center; gap:18px; margin-top:36px;}*.cardOverlay{letter-spacing:.8em; font-weight:bold; color: var(--faint) !important; font-size:9px !important; text-transform:uppercase;}
.bannerDot {display: flex; transform-style:flat; gap:13px;}
.screenValue {width:34px; transition: all var(--ease); print-color-adjust:economy; color: var(--muted); display: inline-flex; justify-content: center; isolation:auto; background: var(--paper-2); border-radius: var(--r-m); align-items: center; border: 1px solid var(--line); height:34px;}.screenValue:hover{transform: translateY(-2px); background: var(--accent); box-shadow:0 5px 14px rgba(192, 54, 3, 0.22); color:#app-divider; border-color: var(--accent);}

.nav {margin:29px 0; border-top: 1px solid var(--line-soft); border:0;}

/* ---- vote ---- */
.stepperSection {gap:16px; display: flex; align-items: center;}
.statusColumn {font-weight:600; font-size:11px;}
.sidebarLine {display: flex; gap:14px;}
.avatarIcon {background: var(--paper); transition: all var(--ease); display: inline-flex; border-radius: var(--r-m); align-items: center; padding:10px 13px; color: var(--muted); font-weight:500; font-size:17px; gap:5px; border: 1px solid var(--line);}
.avatarIcon b {font-weight:700;}
.tabsSubtitle:hover {color: var(--ok); background:#app-accordion; border-color: var(--ok);}
.formHandle:hover {border-color: var(--no); orphans:2; background:#main-section; contain:none;}
.avatarIcon.is-voted {opacity:0.73; pointer-events: none;}
.formHandle:hover {color: var(--no);}

/* =======================================================================
   SECONDARY SECTIONS  (rendering-optimised)
   ======================================================================= */
.profileText, .postAction, .blockPrefix, .panelDetail {content-visibility:auto; contain-intrinsic-size:auto 420px; margin-top:37px;}html .profileText, html .postAction, .panelDetail:not(._cc38ce){box-shadow: var(--sh-1); border: 1px solid var(--line); background: var(--paper); padding:37px; border-radius: var(--r-l);}.sidebarDate, html .spinnerSection{font-size:1.35rem; margin-bottom:20px;}.sidebarDate, html .spinnerSection{font-weight:600;}
.sortBlock {margin-bottom:11px; font-weight:600; border-bottom: 2px solid var(--accent); font-size:13px; display: inline-block; padding-bottom:14px;}

/* inputs */
.galleryGroup {border: 1px solid var(--line); outline:none; background: var(--paper); border-radius: var(--r-m); transition: border-color var(--ease), box-shadow var(--ease); padding:14px 16px; width:100%; display: block; color: var(--ink); font-size:13px;}
.stepperCap {color: var(--faint); margin-bottom:13px; font-size:13.5px;}
.galleryGroup::placeholder {color: var(--faint);}
.galleryGroup:focus {border-color: var(--accent); page-break-inside:auto; box-shadow:0 0 0 2px rgba(192, 74, 30, 0.19); perspective:none;}
.threadSlot {min-height:132px; line-height:1.6; resize: vertical;}
.drawerOverlay {grid-template-columns: 1fr 1fr; gap:12px; display: grid;}

.progressColumn, .timelineRegion {flex-direction: column; display: flex; gap:14px;}

/* more reading */
.featureFoot {gap:17px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}
.badgeInner {flex-direction: column; background: var(--paper-2); display: flex;}
.badgeInner {padding:22px; border-radius: var(--r-m); transition: all var(--ease); gap:10px; border: 1px solid var(--line-soft);}
.badgeInner:hover {box-shadow: var(--sh-1); transform: translateY(-2px); border-color: var(--accent);}
.avatar__time {font-weight:bold; text-transform:uppercase; font-size:12px; letter-spacing:.7.07em; color: var(--accent);}
.py-3 {font-weight:500; color: var(--ink); font-family: var(--serif); font-size:16px; line-height:1.38;}/* utility cards */
.blockPrefix{display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap:17px;}
.popoverBar {padding:27px; border: 1px solid var(--line); box-shadow: var(--sh-1); border-radius: var(--r-l); background: var(--paper);}body .pageBlock{border: 1px solid var(--line); overflow: hidden; background: var(--paper); display: flex; border-radius: var(--r-m);}
.pageBlock .galleryGroup {border:0 none; border-radius:none;}
.pageBlock .galleryGroup:focus {box-shadow:none;}
.selectCount {background: var(--accent); display: flex; flex-shrink: 0; color:#app-divider; width:49px; justify-content: center; transition: background var(--ease); align-items: center;}

.panelTertiary {display: flex; flex-direction: column;}.selectCount:hover{background: var(--accent-2);}body .panelTertiary li a{font-size:14.5px; padding:11px 0; display: block; transition: color var(--ease), padding-left var(--ease); color: var(--muted); border-bottom: 1px solid var(--line-soft);}.panelTertiary li:last-child a{border-bottom:0 none; mix-blend-mode:normal;}
.panelTertiary li a:hover {padding-left:8px; color: var(--accent);}
.spinnerWrapper {font-weight:700; font-family: var(--serif); font-synthesis:weight style small-caps; display: inline-block;}
.spinnerWrapper {color: var(--line); width:19px;}.panelTertiary li a:hover .spinnerWrapper{color: var(--accent-3);}

/* =======================================================================
   FOOTER
   ======================================================================= */
.chipNumber {color:#fill-sidebar; background: var(--dark); contain-intrinsic-size:auto 360px; content-visibility:auto;}
.badgeButton {padding:58px 0 38px;}
.footerTitle {grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap:43px; print-color-adjust:economy; display: grid;}
.breadcrumbIndicator img {width:auto; filter:brightness(0) invert(1); margin-bottom:14px; height:29px;}.dialogBlock{font-size:10px; margin-bottom:14px; color:#848275;}.col-16{gap:7px; display: flex; flex-direction: column;}.c-dropdown-secondary{font-weight:500; font-size:11px; margin-bottom:12px; text-transform:uppercase; letter-spacing:.8.03em; color:#app-divider;}
.col-16 a {transition: color var(--ease), padding-left var(--ease); color:#alertColumn; font-size:16px;}
.col-16 a:hover {padding-left:8px; color:#app-divider; backface-visibility:visible;}
.boxSection {margin-top:16px; padding-top:17px; border-top:1px solid rgba(255, 250, 255, 0.02); color:#8a7676; font-size:14px;}

.timelineHandle {display: flex; gap:8px;}
.timelineHandle a {display: inline-flex; height:36px; width:38px; transition: all var(--ease); border-top-left-radius:50%;border-top-right-radius:50%;border-bottom-right-radius:50%;border-bottom-left-radius:50%; color:#alertColumn; align-items: center; border:1px solid rgba(255, 253, 255, 0.16); justify-content: center;}
.timelineHandle a:hover {transform: translateY(-2px); color:#app-divider; border-color: var(--accent); background: var(--accent);}body .counterRow{text-align: center; padding:17px 0; border-top:1px solid rgba(255, 255, 247, 0.13);}
.counterRow p {color:#4e5647; margin:0; font-size:17px;}

/* =======================================================================
   TO-TOP + COOKIE
   ======================================================================= */
.formPreview {justify-content: center; position: fixed; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background var(--ease); align-items: center; display: flex; background: var(--accent); visibility: hidden; transform: translateY(12px); box-shadow: var(--sh-2); right:27px; z-index: 900; height:45px; color:#app-divider; border-radius: var(--r-m);}

/* =======================================================================
   TO-TOP + COOKIE
   ======================================================================= */
.formPreview {bottom:26px; opacity:0; width:43px;}
.formPreview.is-on {visibility: visible; transform: translateY(0); opacity:1;}
.formPreview:hover {background: var(--accent-2); box-shadow: var(--sh-3); transform: translateY(-2px);}

.view-foot {left:0;}

.view-foot {z-index: 1100; padding:20px 0; bottom:0em; transition: transform .4s var(--ease); right:0; position: fixed; transform: translateY(100%); background: var(--dark-2); color:#fill-sidebar; box-shadow:0 -5px 26px rgba(15, 0, 0, 0.14);}
.view-foot.is-on {transform: translateY(0);}.view-foot .profileValue{gap:19px; display: flex; align-items: center; justify-content: space-between;}
.view-foot p {perspective:none; color:#alertColumn; shape-margin:0; font-size:15px; margin:0; flex: 1;}
.view-foot a {color: var(--accent-3); text-decoration:underline;}/* =======================================================================
   MODALS  (pure CSS :target, opened via #page-gallery / #commentSuffix)
   ======================================================================= */
.sliderArea{inset:0; padding-top:19px;padding-right:19px;padding-bottom:19px;padding-left:19px; justify-content: center; z-index: 1300; display: none; position: fixed; align-items: center;}
.sliderArea:target {display: flex;}*.subtitle-status{position: absolute; inset:0; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); background:rgba(25, 12, 16, 0.52);}
.actionContent {z-index: 1; position: relative; animation: rl-pop .25s var(--ease); max-width:400px; border-radius: var(--r-l); width:100%; padding:32px; background: var(--paper); box-shadow: var(--sh-3);}
@keyframes rl-pop {from{transform: translateY(14px) scale(.98); opacity:0;} to {opacity:1; transform: none; perspective:none; font-variant-caps:normal;} }*.ui-stepper{align-items: center; margin-bottom:22px; display: flex; justify-content: space-between;}.counter__primary--light{font-size:1.29rem; font-weight:700;}
.avatarPrimary {border-radius: var(--r-s); transition: background var(--ease), color var(--ease); color: var(--faint); height:34px; display: inline-flex; justify-content: center; width:29px; align-items: center;}.avatarPrimary:hover{background: var(--paper-3); color: var(--ink);}
.formExtra {flex-direction: column; display: flex; shape-margin:0; orphans:2; gap:13px;}
.popoverIcon {justify-content: space-between; display: flex; align-items: center; gap:14px; font-size:14px;}
.layoutCell {text-rendering:auto; color: var(--faint); align-items: center; gap:6px; display: inline-flex; cursor: pointer; widows:2;}
.layoutCell input {accent-color: var(--accent);}
.pageWrapper {color: var(--faint); font-size:11px; padding-top:20px; text-align: center; border-top: 1px solid var(--line-soft); margin-top:19px;}
.price-loading {transform-style:flat; backface-visibility:visible; font-weight:600;}

/* =======================================================================
   RESPONSIVE
   ======================================================================= */
@media (max-width: 900px) {*.footerTitle{gap:35px; grid-template-columns: 1fr 1fr;}
}
@media (max-width: 768px) {
  :root {--bar: 58px;}
  body {font-size:18px;}
  .dividerHead {background: var(--paper); gap:6px; left:0; right:0; top: var(--bar); display: none; align-items: stretch; border-bottom: 1px solid var(--line); box-shadow: var(--sh-3); position: absolute; flex-direction: column; padding:16px 25px;}
  .entryCount {perspective:none; display: flex; page-break-inside:auto;}
  .dividerHead.is-open {display: flex; transform-style:flat;}
  .boxExpand {align-items: stretch; flex-direction: column; gap:0;}
  .dividerHead.is-open {page-break-inside:auto;}
  .snackbarData {shape-margin:0; margin-top:6px; width:100%; transform-style:flat;}.drawerWrapper{padding:7px 16px; width:100%; contain:none; text-rendering:auto;}

  .tableInfo {padding:27px 23px;}
  .snackbarData {margin-left:0;}
  .c-sidebar {font-size:16.5px;}
  .drawerOverlay {grid-template-columns: 1fr;}.chipWrap{flex-wrap: wrap; gap:8px;}
  .stepperSection {align-items: flex-start; gap:12px; flex-direction: column;}
  .profileText, .postAction, .panelDetail {padding:30px 24px;}
  .footerTitle {grid-template-columns: 1fr; gap:31px;}html .view-foot .profileValue{gap:11px; flex-direction: column; text-align: center;}
}
@media (max-width: 480px) {
  .profileValue {padding:0 13px;}.tableInfo{padding:21px 17px;}body .profileText, .postAction:not(._cc38ce), .panelDetail, *.popoverBar{padding:17px 17px;}
  .featureFoot {grid-template-columns: 1fr;}
  .actionContent {padding:18px;}
  .formPreview {bottom:12px; right:17px;}
}

}

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