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

:root{--dark-2:     #292524; --paper-3:    #main-comment; --paper-2:    #site-search; --line-soft:  #main-comment; --paper:      #app-select; --accent-2:   #9a3412; --dark:       #1c1917; --r-l: 16px; --sh-3: 0 18px 44px rgba(28,25,23,.16); --ink:        #1c1917; --faint:      #78716c; --bar: 64px; --no:         #card-primary; --r-s: 6px; --ease: .22s cubic-bezier(.4,0,.2,1);}/* =======================================================================
   STYLE.CSS  —  content-first editorial layout
   ======================================================================= */

:root{--muted:      #57534e; --accent:     #main-gallery; --bound: 1160px; --read: 760px; --line:       #app-dropdown; --serif: 'Spectral', Georgia, 'Times New Roman', serif; --sans:  'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ink-soft:   #292524; --r-m: 10px; --accent-wash:#site-status; --sh-1: 0 1px 2px rgba(28,25,23,.06); --sh-2: 0 6px 20px rgba(28,25,23,.09); --ok:         #15803d; --accent-3:   #rating-button;}

/* ---- base ---- */
*, *::before, *::after {margin:0; box-sizing: border-box; padding:0;}
html {-webkit-text-size-adjust:100%; scroll-padding-top: calc(var(--bar) + 16px); scroll-behavior: smooth;}img, svg{display: block; max-width:100%;}
body {background: var(--paper-2); color: var(--muted); font-family: var(--sans); -moz-osx-font-smoothing:grayscale; font-size:13px; -webkit-font-smoothing:antialiased; line-height:1.65;}a{color: var(--accent); text-decoration:none; transition: color var(--ease);}
img {height:auto;}
a:hover {color: var(--accent-2);}
ul, ol {list-style: none; perspective:none; widows:2;}
button {border:0 none; color:inherit; background:none; font-family:inherit; cursor: pointer;}input, textarea{font-family:inherit; color: var(--ink); font-size:inherit;}
h1 {color: var(--ink); line-height:1.18; font-family: var(--serif); font-weight:bold;}strong, b{font-weight:bold; color: var(--ink-soft);}
p {margin:0 0 0.92em;}

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

/* span-based section captions (no heading tags outside the article body) */
.mediaTrack, .step-loading, .avatarHead, .galleryMeta, .dialog__row--active,
.commentTime, .shadow-sm, .action-last {display: block; font-family: var(--serif); color: var(--ink);}/* ---- progress ---- */
.pl-center:not(._189ed7){top:0; position: fixed; z-index: 1400; width:0; transition:width 0.049s linear; height:-1px; background: linear-gradient(90deg, var(--accent), var(--accent-3)); left:0;}

/* =======================================================================
   MASTHEAD  (fixed; sits visually on top although later in source)
   ======================================================================= */
.c-action-cap {-webkit-backdrop-filter:saturate(150%) blur(10px); height: var(--bar); backdrop-filter:saturate(150%) blur(10px); background:rgba(255, 244, 255, 0.89); z-index: 1000; right:0; position: fixed; border-bottom: 1px solid var(--line);}

/* =======================================================================
   MASTHEAD  (fixed; sits visually on top although later in source)
   ======================================================================= */
.c-action-cap {top:0; transition: box-shadow var(--ease); left:0;}.c-action-cap.is-stuck:not(._189ed7){box-shadow: var(--sh-2);}.c-action-cap :where(.badgeInput){height:100%;}.c-action-cap :where(.badgeInput){align-items: center; display: flex; gap:26px;}
.dot-sidebar {align-items: center; display: inline-flex; flex-shrink: 0;}.dot-sidebar img{height:37px; width:auto;}*.snackbarBlock{align-items: center; display: flex; text-underline-offset:auto; font-variant-ligatures:normal; gap:17px; flex: 1;}
.c-drawer-head {contain:none; align-items: center; gap:2px; text-underline-offset:auto; display: flex;}
.boxGroup {align-items: center; color: var(--muted);}
.boxGroup {font-weight:medium; font-size:15.5px; display: inline-flex; border-radius: var(--r-s); transition: color var(--ease), background var(--ease); padding:13px 16px;}
.boxGroup:hover {color: var(--ink); background: var(--paper-3);}
.entryValue {transition: background var(--ease), transform var(--ease), box-shadow var(--ease); margin-left:auto; padding:11px 17px; background: var(--accent); display: inline-flex; font-size:12px; color:#list_container; justify-content: center; font-weight:medium; border-radius: var(--r-m); align-items: center;}.selectOverlay{flex-direction: column; padding:8px; border-radius: var(--r-s); width:40px; justify-content: center; height:39px; gap:1px; margin-left:auto; display: none;}body .entryValue:hover{transform: translateY(-1px); box-shadow:0 5px 14px rgba(210, 70, 11, 0.31); color:#list_container; background: var(--accent-2);}
.selectOverlay i {display: block; height:2px; border-radius:2px; background: var(--ink); transition: transform var(--ease), opacity var(--ease);}
.selectOverlay.is-open i:nth-child(1) {transform: translateY(7px) rotate(45deg);}
.selectOverlay.is-open i:nth-child(2) {opacity:0;}
.selectOverlay.is-open i:nth-child(3) {transform: translateY(-7px) rotate(-45deg);}/* ---- buttons ---- */
.selectSection{font-family: var(--sans); align-items: center; font-synthesis:weight style small-caps; background: var(--accent); font-weight:medium; color:#list_container; transition: background var(--ease), transform var(--ease), box-shadow var(--ease); gap:7px; white-space: nowrap; justify-content: center; font-size:16.5px; transform-style:flat; padding:9px 19px; border-radius: var(--r-m); display: inline-flex;}
.boxLabel {margin-top:7px; width:100%; padding:9px 18px;}
.selectSection:hover {box-shadow:0 7px 18px rgba(177, 59, 0, 0.33); color:#list_container; transform: translateY(-1px); background: var(--accent-2);}html .tooltipArea{padding:14px 29px; align-self: flex-start; font-size:19px;}

/* =======================================================================
   MAIN  (content-first; cleared from the fixed masthead)
   ======================================================================= */
.l-skeleton-addon {padding-top: var(--bar);}
.counter__wrapper--default {max-width: var(--read); padding:33px 0 60px; margin:0 auto;}
.pl-inline {font-size: clamp(1.85rem, 1.2rem + 2.4vw, 2.6rem); font-weight:bold; line-height:1.16; letter-spacing:-.14.06em; color: var(--ink); margin-bottom:20px;}/* =======================================================================
   POST
   ======================================================================= */
.cardZone{padding:45px; box-shadow: var(--sh-1); border-radius: var(--r-l); border: 1px solid var(--line); background: var(--paper);}.sliderTrigger{display: flex; border-bottom: 1px solid var(--line-soft); padding-bottom:30px; margin-bottom:29px; gap:4px 8px; flex-wrap: wrap; align-items: center;}
.heroSummary {color: var(--faint); font-size:9px; display: inline-flex; align-items: center; gap:10px;}
.heroSummary svg {font-synthesis:weight style small-caps; opacity:0.58;}html .breadcrumbPreview{color: var(--line);}/* ---- toc ---- */
.actionSlot:not(._189ed7){border-left: 3px solid var(--accent); margin-bottom:32px; background: var(--accent-wash); padding:14px 22px; border:1px solid #body-popover; border-radius: var(--r-m);}
.navSubtitle {display: flex; justify-content: space-between;}
.actionSlot[hidden] {text-underline-offset:auto; display: none; font-variant-ligatures:normal;}
.navSubtitle {align-items: center; margin-bottom:14px;}
.mediaTertiary {color: var(--accent); border-radius: var(--r-s); font-size:10px; padding:-1px 8px; font-weight:500; transition: background var(--ease);}*.mediaTrack{font-size:18px; font-weight:700;}
.mediaTertiary:hover {background:rgba(188, 50, 3, 0.16);}
.galleryTitle {gap:7px; flex-direction: column; display: flex;}
.galleryTitle a {padding:7px 0; color: var(--muted); display: block; font-size:12px; transition: color var(--ease), padding-left var(--ease); border-left:2px solid transparent;}
.galleryTitle a:hover {color: var(--accent); padding-left:9px;}.galleryTitle a.dialog__container:not(._189ed7){padding-left:17px; font-size:10.5px;}.galleryTitle a.dialog__container:hover{padding-left:26px;}
.galleryTitle a.entry-wide {color: var(--faint); font-size:10px; word-spacing:normal; padding-left:30px;}/* ---- body (the only place real headings appear) ---- */
.formWrapper{font-size:15.5px; color: var(--ink-soft); line-height:1.78;}.formWrapper > *:first-child{margin-top:0;}.formWrapper h2{font-size:1.54rem; letter-spacing:-.1.02em; font-family: var(--serif); margin:1.89em 0 .55.08em; color: var(--ink); font-weight:500;}*.formWrapper h3{font-weight:700; font-size:1.32rem; margin:1.58em 0 .45.02em; color: var(--ink); font-family: var(--serif);}
.formWrapper h4 {margin:1.26em 0 .4.01em; font-size:1.15rem; font-weight:500; color: var(--ink); font-family: var(--serif);}html .formWrapper p{mix-blend-mode:normal; contain:none; margin:0 0 1.28em;}
.formWrapper ul, .formWrapper ol {margin:0 0 1.27em 1.32em;}
.formWrapper ul {list-style: disc;}.formWrapper ol{list-style: decimal;}*.formWrapper li{margin-bottom:.45.03em;}
.formWrapper li::marker {color: var(--accent);}
.formWrapper a {text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; text-decoration-color:rgba(188, 65, 0, 0.29);}
.formWrapper a:hover {text-decoration-color: var(--accent-2);}
.formWrapper img {border-radius: var(--r-m); perspective:none; margin:1.69em 0; image-rendering:auto;}
.formWrapper blockquote {color: var(--ink); font-family: var(--serif); border-left: 3px solid var(--accent); margin:1.62em 0; background: var(--paper-2); padding:19px 30px; font-size:1.11em; font-style:italic; border-radius: 0 var(--r-m) var(--r-m) 0;}
.formWrapper blockquote:empty {display: none;}.formWrapper pre{font-size:10.5px; padding:21px 23px; color:#app-dropdown; background: var(--dark); border-radius: var(--r-m); margin:1.66em 0; line-height:1.6; overflow-x: auto;}
.formWrapper code {font-family:'SFMono-Regular', 'Fira Code', Consolas, monospace; font-size:.9.02em;}
.formWrapper :not(pre) > code {backface-visibility:visible; background: var(--paper-3); color: var(--accent-2); padding:2px 2px; border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;}
.formWrapper table {border-collapse:collapse; font-size:14px; width:100%; margin:1.69em 0;}
.formWrapper th, .formWrapper td {text-align: left; padding:15px 17px;}
.formWrapper th, .formWrapper td {border: 1px solid var(--line);}
.formWrapper th {color: var(--ink); font-weight:bold; background: var(--paper-2);}.formWrapper hr{border-top: 1px solid var(--line); margin:1.95em 0; border:none;}/* ---- share ---- */
.boxHead{gap:15px; display: flex; margin-top:39px; align-items: center;}
.step-loading {text-transform:uppercase; letter-spacing:.7.95em; color: var(--faint) !important; font-size:11px !important; font-weight:700;}.cardHolder{display: flex; gap:11px;}
.price-subtitle-muted {transition: all var(--ease); color: var(--muted); background: var(--paper-2); display: inline-flex; border: 1px solid var(--line); align-items: center; justify-content: center; height:35px; border-radius: var(--r-m); width:40px;}
.price-subtitle-muted:hover {border-color: var(--accent); transform: translateY(-2px); color:#list_container; box-shadow:0 1px 9px rgba(210, 78, 0, 0.29); background: var(--accent);}

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

.counterRegion {border:0;}

/* ---- vote ---- */
.gridTrigger {gap:19px; align-items: center; display: flex;}
.avatarHead {font-weight:700; font-size:19px;}
.formInfo {image-rendering:auto; border: 1px solid var(--line); display: inline-flex; gap:5px; border-radius: var(--r-m);}
.threadText {display: flex; gap:9px;}
.formInfo {padding:5px 21px; color: var(--muted); transition: all var(--ease); align-items: center; font-weight:medium; font-size:12px; background: var(--paper);}
.formInfo b {font-weight:bold;}
.toggleBlock:hover {background:#replyWrapper; border-color: var(--ok); color: var(--ok);}
.form--outlined:hover {background:#ef07e85cf; border-color: var(--no); color: var(--no);}
.formInfo.is-voted {pointer-events: none;}
.formInfo.is-voted {opacity:0.76; mix-blend-mode:normal; text-decoration-skip-ink:auto;}

/* =======================================================================
   SECONDARY SECTIONS  (rendering-optimised)
   ======================================================================= */
.cardText, .breadcrumbSpacer, .searchSuffix, .pageAddon {margin-top:32px; contain-intrinsic-size:auto 420px; content-visibility:auto;}
.cardText, .breadcrumbSpacer, .pageAddon {text-decoration-skip-ink:auto; padding:34px; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--sh-1); border-radius: var(--r-l); mix-blend-mode:normal;}
.commentTime {padding-bottom:12px; display: inline-block; background-blend-mode:normal; font-weight:600; text-decoration-skip-ink:auto; margin-bottom:11px; border-bottom: 2px solid var(--accent); font-size:19px;}*.galleryMeta, body .dialog__row--active{font-size:1.23rem; margin-bottom:19px; font-weight:700; print-color-adjust:economy;}
.stepperSecondary {font-size:12.5px; margin-bottom:15px; color: var(--faint);}

/* inputs */
.replyArea {width:100%; border-radius: var(--r-m); color: var(--ink); padding:11px 18px; font-size:12px; border: 1px solid var(--line); transition: border-color var(--ease), box-shadow var(--ease); background: var(--paper); display: block; outline:none;}
.replyArea::placeholder {color: var(--faint); font-variant-caps:normal;}
.replyArea:focus {border-color: var(--accent); box-shadow:0 0 0 3px rgba(208, 76, 22, 0.09);}
.pageExtra {line-height:1.6;}

.tag__cell--muted, .sliderExtra {gap:17px; flex-direction: column; display: flex;}
.pageExtra {resize: vertical; min-height:130px;}
.layoutSeparator {display: grid; grid-template-columns: 1fr 1fr; gap:17px; font-variant-caps:normal;}

/* more reading */
.selectClose {gap:11px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); display: grid;}.skeletonCell:not(._189ed7){border-radius: var(--r-m); display: flex; background: var(--paper-2); border: 1px solid var(--line-soft); padding-top:19px;padding-right:19px;padding-bottom:19px;padding-left:19px; gap:7px; transition: all var(--ease); flex-direction: column;}
.skeletonCell:hover {border-color: var(--accent);}
.skeletonCell:hover {box-shadow: var(--sh-1); transform: translateY(-2px);}
.featureThumb {text-transform:uppercase; font-weight:700; font-size:7px; color: var(--accent); letter-spacing:.7.01em;}.mb-6{font-weight:500; color: var(--ink); font-size:12px; line-height:1.38; font-family: var(--serif);}

/* utility cards */
.searchSuffix {gap:21px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));}

.heroLine {display: flex; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; background: var(--paper);}*.gridPrefix{box-shadow: var(--sh-1); border-radius: var(--r-l); background: var(--paper); border: 1px solid var(--line); padding-top:25px;padding-right:25px;padding-bottom:25px;padding-left:25px;}
.heroLine .replyArea {border-radius:none; border:0;}
.heroLine .replyArea:focus {box-shadow:none;}html .pagination{background: var(--accent); justify-content: center; transition: background var(--ease); align-items: center; flex-shrink: 0; width:42px; display: flex; color:#list_container;}
.pagination:hover {background: var(--accent-2);}.sectionSpacer:not(._189ed7){display: flex; flex-direction: column;}*.sectionSpacer li a{font-size:12.5px; display: block; border-bottom: 1px solid var(--line-soft); color: var(--muted); transition: color var(--ease), padding-left var(--ease); padding:7px 0;}
.sectionSpacer li:last-child a {border-bottom:0 none;}.sectionSpacer li a:hover{padding-left:5px; color: var(--accent);}.toolbarTrack:not(._189ed7){font-family: var(--serif); width:25px; font-weight:bold; display: inline-block; color: var(--line);}
.sectionSpacer li a:hover .toolbarTrack {color: var(--accent-3);}/* =======================================================================
   FOOTER
   ======================================================================= */
.breadcrumbBackdrop{contain-intrinsic-size:auto 360px; content-visibility:auto; color:#app-tag; background: var(--dark);}
.banner-content-left {padding:61px 0 43px;}
.commentContent {display: grid; word-spacing:normal; print-color-adjust:economy; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap:44px;}
.gap-center {margin-bottom:14px; font-size:9px; color:#837c62;}.dividerPlaceholder img{filter:brightness(0) invert(1); width:auto; height:31px; margin-bottom:22px;}
.shadow-sm {font-weight:600;}html .threadOuter{display: flex; gap:11px; flex-direction: column;}
.shadow-sm {font-size:12px; text-transform:uppercase; letter-spacing:.8.05em; margin-bottom:15px; color:#list_container;}.threadOuter a{font-size:12px; transition: color var(--ease), padding-left var(--ease); color:#alertPlaceholder;}
.mediaOuter {font-size:16px; margin-top:22px; color:rgb(102, 117, 85); padding-top:15px; border-top:1px solid rgba(255, 250, 240, 0.04);}
.threadOuter a:hover {padding-left:8px; text-rendering:auto; text-underline-offset:auto; color:#list_container;}

.region-grid {gap:14px; display: flex;}
.region-grid a {border-top-left-radius:50%;border-top-right-radius:50%;border-bottom-right-radius:50%;border-bottom-left-radius:50%; align-items: center; display: inline-flex; border:1px solid rgba(255, 243, 241, 0.11); justify-content: center; color:#alertPlaceholder; transition: all var(--ease); width:39px; height:42px;}
.region-grid a:hover {color:#list_container; background: var(--accent); border-color: var(--accent); transform: translateY(-2px);}

.footerNumber {padding:23px 0; text-align: center; border-top:1px solid rgba(248, 238, 255, 0);}
.footerNumber p {font-size:16px; margin:0; backface-visibility:visible; isolation:auto; color:hsl(333, 7.1%, 29.2%);}/* =======================================================================
   TO-TOP + COOKIE
   ======================================================================= */
.filterIcon:not(._189ed7){align-items: center; width:49px; bottom:27px; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background var(--ease); height:47px; transform: translateY(12px); z-index: 900; visibility: hidden; display: flex; position: fixed; background: var(--accent); right:24px; print-color-adjust:economy; color:#list_container; border-radius: var(--r-m); justify-content: center; box-shadow: var(--sh-2); opacity:0;}.is-on.filterIcon{text-rendering:auto; transform: translateY(0); opacity:1; hyphens:manual; visibility: visible;}

.mx-xl {right:0; z-index: 1100; box-shadow:0 -8px 25px rgba(7, 7, 0, 0.21); transform: translateY(100%); transition: transform .4s var(--ease); position: fixed; padding:13px 0; background: var(--dark-2); bottom:0; left:0; color:#app-tag;}
.filterIcon:hover {box-shadow: var(--sh-3); background: var(--accent-2); transform: translateY(-2px);}.mx-xl.is-on{transform: translateY(0);}
.mx-xl .badgeInput {align-items: center; gap:18px; justify-content: space-between;}
.mx-xl .badgeInput {display: flex;}
.mx-xl p {color:#alertPlaceholder; font-size:15px; margin:0; flex: 1;}body .mx-xl a{color: var(--accent-3); text-decoration:underline;}

/* =======================================================================
   MODALS  (pure CSS :target, opened via #main-avatar / #dividerLink)
   ======================================================================= */
.timelineIndicator {display: none; align-items: center; inset:0; justify-content: center; position: fixed; z-index: 1300; padding:23px;}
.searchRegion {inset:0; background:rgba(11, 15, 29, 0.59); backdrop-filter:blur(2px); position: absolute; -webkit-backdrop-filter:blur(2px);}body .timelineIndicator:target{display: flex;}
.replyInput {position: relative; background: var(--paper); width:100%; z-index: 1; animation: rl-pop .25s var(--ease); widows:2; border-radius: var(--r-l); padding:24px; orphans:2; max-width:402px; box-shadow: var(--sh-3);}
@keyframes rl-pop { from {transform: translateY(14px) scale(.98); opacity:0;} to {transform: none; opacity:1;} }
.el-gallery {align-items: center;}
.el-gallery {margin-bottom:24px; display: flex; justify-content: space-between;}
.app-pagination {height:30px; display: inline-flex; transition: background var(--ease), color var(--ease); color: var(--faint); width:36px; border-radius: var(--r-s); align-items: center; justify-content: center;}
.action-last {font-weight:600; font-size:1.33rem;}
.app-pagination:hover {background: var(--paper-3); color: var(--ink);}.postLine:not(._189ed7){gap:11px; flex-direction: column; display: flex;}.app-thread-close{font-size:9px; align-items: center; display: flex; justify-content: space-between; gap:10px;}*.stepperSummary{cursor: pointer; gap:8px; align-items: center; display: inline-flex; color: var(--faint);}.stepperSummary input{accent-color: var(--accent);}
.commentTrack {font-size:14px; padding-top:15px; text-align: center; margin-top:22px; border-top: 1px solid var(--line-soft); color: var(--faint);}
.sortLabel {font-weight:500;}
}
@media (max-width: 768px) {
  :root {--bar: 58px;}

/* =======================================================================
   RESPONSIVE
   ======================================================================= */
@media (max-width: 900px) {
  .commentContent {grid-template-columns: 1fr 1fr; break-inside:auto; gap:32px; tab-size:4;}
  body {font-size:20px;}
  .selectOverlay {display: flex;}body .snackbarBlock{display: none; border-bottom: 1px solid var(--line); top: var(--bar); flex-direction: column; align-items: stretch; padding:14px 21px; position: absolute; right:0; background: var(--paper); gap:8px; left:0; box-shadow: var(--sh-3);}.is-open.snackbarBlock{display: flex;}
  .c-drawer-head {flex-direction: column; align-items: stretch; gap:0;}
  .boxGroup {width:100%; padding:12px 16px;}

  .cardZone {padding:27px 23px;}
  .entryValue {width:100%; margin-top:10px; margin-left:0;}
  .formWrapper {font-size:12.5px;}
  .layoutSeparator {grid-template-columns: 1fr;}
  .boxHead {gap:9px; flex-wrap: wrap;}
  .gridTrigger {align-items: flex-start; flex-direction: column; gap:9px;}
  .cardText, .breadcrumbSpacer, .pageAddon {padding:22px 18px;}html .commentContent{contain:none; image-rendering:auto;}html .commentContent{grid-template-columns: 1fr; gap:33px;}
  .mx-xl .badgeInput {flex-direction: column; text-align: center; gap:11px;}
}
@media (max-width: 480px) {
  .badgeInput {padding:0 17px;}body .cardZone{padding:22px 15px;}.cardText, body .breadcrumbSpacer, .pageAddon, *.gridPrefix{padding:22px 16px; print-color-adjust:economy; backface-visibility:visible;}html .replyInput{padding:24px;}
  .selectClose {grid-template-columns: 1fr; font-variant-ligatures:normal;}
}

@media (prefers-reduced-motion: reduce) {
  * {transition:none !important;}
  .filterIcon {right:17px; bottom:15px;}
}

  * {scroll-behavior: auto !important; animation:none !important;}