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

:root {--ink-soft:   #292524; --accent-2:   #9a3412; --line:       #site-module; --no:         #page-status; --paper:      #action-spacer; --paper-2:    #card-indicator; --r-l: 16px; --paper-3:    #main-sort; --bar: 64px; --muted:      #57534e; --accent:     #e0d63b82e; --sans:  'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --faint:      #78716c; --r-m: 10px; --dark:       #1c1917; --ease: .22s cubic-bezier(.4,0,.2,1); --sh-1: 0 1px 2px rgba(28,25,23,.06); --accent-wash:#app-breadcrumb; --ok:         #15803d; --serif: 'Spectral', Georgia, 'Times New Roman', serif; --dark-2:     #292524; --accent-3:   #page-card; --bound: 1160px; --r-s: 6px; --read: 760px; --ink:        #1c1917; --line-soft:  #main-sort; --sh-2: 0 6px 20px rgba(28,25,23,.09); --sh-3: 0 18px 44px rgba(28,25,23,.16);}/* ---- base ---- */
*, *::before, *::after{padding:0; box-sizing: border-box; margin:0;}
html {scroll-padding-top: calc(var(--bar) + 16px); -webkit-text-size-adjust:100%; scroll-behavior: smooth;}
body {background: var(--paper-2); line-height:1.65; color: var(--muted); font-size:20px; -webkit-font-smoothing:antialiased; font-family: var(--sans); -moz-osx-font-smoothing:grayscale;}
img, svg {display: block; max-width:100%;}
a {color: var(--accent); transition: color var(--ease); text-decoration:none;}
img {height:auto; will-change:auto;}
a:hover {color: var(--accent-2);}button{color:inherit; cursor: pointer; background:none; font-family:inherit; border:0em;}
ul, ol {list-style: none;}
input, textarea {font-size:inherit; color: var(--ink); font-family:inherit;}
h1 {font-weight:700; color: var(--ink); font-family: var(--serif); line-height:1.18;}p{margin:0 0 1.04em;}strong, b{text-underline-offset:auto; background-blend-mode:normal; color: var(--ink-soft); font-weight:bold;}.toolbar-backdrop-sticky:not(._4ae835){margin:0 auto; max-width: var(--bound); padding:0 20px;}
.c-tooltip-preview {position: absolute; width:1px; border:0 none; height:1px; clip:rect(0,0,0,0); margin:-1px; white-space: nowrap; overflow: hidden; padding:0;}

/* span-based section captions (no heading tags outside the article body) */
.page-tertiary, .toggle-cell, .c-dialog-zone, .c-post-addon, .indicator-comment,
.spinner-cell-secondary, .opacity-2xl, .layout-secondary {display: block; color: var(--ink); font-family: var(--serif);}

/* ---- progress ---- */
.pagination-cell {top:0; height:7px;}

/* ---- progress ---- */
.pagination-cell {z-index: 1400; left:0; background: linear-gradient(90deg, var(--accent), var(--accent-3)); transition:width 0.133s linear; width:0; position: fixed;}

/* =======================================================================
   MASTHEAD  (fixed; sits visually on top although later in source)
   ======================================================================= */
.timelineTertiary {height: var(--bar); contain:none;}

/* =======================================================================
   MASTHEAD  (fixed; sits visually on top although later in source)
   ======================================================================= */
.timelineTertiary {transition: box-shadow var(--ease); backdrop-filter:saturate(150%) blur(10px); left:0; right:0; z-index: 1000; position: fixed; border-bottom: 1px solid var(--line); -webkit-backdrop-filter:saturate(150%) blur(10px); top:0; transform-style:flat; background:rgba(251, 255, 255, 0.86);}html .timelineTertiary.is-stuck{box-shadow: var(--sh-2);}.timelineTertiary :where(.toolbar-backdrop-sticky){height:100%; gap:25px;}.timelineTertiary :where(.toolbar-backdrop-sticky){display: flex; align-items: center;}
.status-vertical {align-items: center; flex-shrink: 0; display: inline-flex;}
.status-vertical img {width:auto; height:32px;}
.hero-sticky {display: flex; align-items: center; gap:2px;}body .box{align-items: center; gap:19px; display: flex; flex: 1;}
.skeleton-center {break-inside:auto; align-items: center; color: var(--muted); padding:6px 15px; display: inline-flex; font-weight:medium; transition: color var(--ease), background var(--ease); print-color-adjust:economy; font-size:17.5px; border-radius: var(--r-s);}
.skeleton-center:hover {color: var(--ink); background: var(--paper-3);}
.view-image {background: var(--accent); margin-left:auto; padding:10px 17px; align-items: center; border-radius: var(--r-m); transition: background var(--ease), transform var(--ease), box-shadow var(--ease); backface-visibility:visible; font-weight:500; justify-content: center; color:#inner-comment; display: inline-flex; font-size:12px;}.view-image:hover{color:#inner-comment; box-shadow:0 7px 12px rgba(201, 52, 16, 0.29); transform: translateY(-1px); background: var(--accent-2);}

.c-modal-track {padding:9px; display: none; font-synthesis:weight style small-caps; width:40px; justify-content: center; flex-direction: column; height:39px; gap:3px; margin-left:auto; border-radius: var(--r-s);}
.c-modal-track i {height:2px; border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px; display: block; text-rendering:auto; transition: transform var(--ease), opacity var(--ease); background: var(--ink);}
.c-modal-track.is-open i:nth-child(1) {transform: translateY(7px) rotate(45deg);}
.c-modal-track.is-open i:nth-child(2) {opacity:0;}

/* ---- buttons ---- */
.banner {font-family: var(--sans); border-radius: var(--r-m); font-size:11.5px; padding:14px 19px; white-space: nowrap; color:#inner-comment; font-weight:500; gap:5px; display: inline-flex; background: var(--accent); transition: background var(--ease), transform var(--ease), box-shadow var(--ease); align-items: center; justify-content: center;}.c-modal-track.is-open i:nth-child(3){transform: translateY(-7px) rotate(-45deg);}.banner:hover{color:#inner-comment; background: var(--accent-2); transform: translateY(-1px); box-shadow:0 7px 17px rgba(199, 63, 0, 0.23);}
.breadcrumb-small {width:100%; margin-top:0px; padding:13px 24px;}
.thread-outer-secondary {padding:15px 25px; font-size:13px; align-self: flex-start;}

/* =======================================================================
   MAIN  (content-first; cleared from the fixed masthead)
   ======================================================================= */
.tag--active {padding-top: var(--bar);}.status-dot-dark:not(._4ae835){margin:0 auto; max-width: var(--read); padding:29px 0 67px;}/* =======================================================================
   POST
   ======================================================================= */
.tabs-info{padding:46px; border-radius: var(--r-l); box-shadow: var(--sh-1); border: 1px solid var(--line); background: var(--paper);}
.c-accordion-overlay {color: var(--ink); line-height:1.16; font-weight:bold; font-size: clamp(1.85rem, 1.2rem + 2.4vw, 2.6rem); letter-spacing:-.13.96em; margin-bottom:20px;}
.block-region-muted {display: flex; flex-wrap: wrap; margin-bottom:26px; align-items: center; border-bottom: 1px solid var(--line-soft);}
.block-region-muted {padding-bottom:22px; gap:5px 9px;}*.my-around{display: inline-flex; gap:8px;}*.my-around{align-items: center; color: var(--faint); font-size:16px;}
.my-around svg {opacity:0.64;}
.pagination-info {color: var(--line);}/* ---- toc ---- */
.app-feature:not(._4ae835){border-left: 3px solid var(--accent); border:1px solid #dropdown_group; padding:21px 20px; background: var(--accent-wash); margin-bottom:28px; border-radius: var(--r-m);}
.app-feature[hidden] {display: none;}
.page-tertiary {font-size:19px; font-weight:600;}
.t-block-body {display: flex; justify-content: space-between; align-items: center; margin-bottom:13px;}
.preview-toolbar {transition: background var(--ease); padding:-1px 5px; color: var(--accent); border-radius: var(--r-s); font-weight:medium; font-size:16px;}.preview-toolbar:hover{contain:none; break-inside:auto; background:rgba(206, 68, 0, 0.11);}
.summary-tabs {display: flex; gap:1px; flex-direction: column;}
.summary-tabs a {padding:0px 0; display: block; font-size:16px; transition: color var(--ease), padding-left var(--ease); border-left:2px solid transparent; color: var(--muted);}
.summary-tabs a:hover {padding-left:11px; color: var(--accent);}
.summary-tabs a.u-box-wrapper {font-size:11.5px; padding-left:15px; image-rendering:auto;}
.summary-tabs a.u-box-wrapper:hover {padding-left:19px;}
.summary-tabs a.toggle__suffix--left {padding-left:30px; font-size:14px; color: var(--faint);}/* ---- body (the only place real headings appear) ---- */
.banner-title{line-height:1.78; color: var(--ink-soft); font-size:16.5px;}
.banner-title > *:first-child {margin-top:0;}.banner-title h2{font-family: var(--serif); font-size:1.48rem; font-weight:600; margin:1.96em 0 .55.04em; letter-spacing:-.1.07em; color: var(--ink);}body .banner-title h3{color: var(--ink); font-family: var(--serif); margin:1.44em 0 .45.08em; font-weight:600; font-size:1.28rem;}
.banner-title h4 {font-weight:700; color: var(--ink); font-size:1.02rem; margin:1.38em 0 .4.08em; font-family: var(--serif);}
.banner-title p {margin:0 0 1.23em;}
.banner-title ul, .banner-title ol {margin:0 0 1.35em 1.35em;}html .banner-title ul{list-style: disc;}
.banner-title ol {list-style: decimal;}
.banner-title li {margin-bottom:.44.95em;}
.banner-title li::marker {color: var(--accent);}body .banner-title a{text-decoration-thickness:1.5px; text-decoration:underline; text-decoration-color:rgba(202, 68, 20, 0.3); text-underline-offset:3px;}body .banner-title a:hover{text-decoration-color: var(--accent-2);}
.banner-title img {border-radius: var(--r-m); margin:1.72em 0;}
.banner-title blockquote {padding:14px 30px; color: var(--ink); font-family: var(--serif); border-radius: 0 var(--r-m) var(--r-m) 0; margin:1.68em 0; background: var(--paper-2); page-break-inside:auto; border-left: 3px solid var(--accent); font-size:1.06em; font-style:italic;}html .banner-title blockquote:empty{display: none;}body .banner-title pre{color:#site-module; padding:16px 21px; overflow-x: auto; margin:1.7em 0; background: var(--dark); line-height:1.6; font-size:11.5px; border-radius: var(--r-m);}
.banner-title code {font-size:.8.96em; font-family:'SFMono-Regular', 'Fira Code', Consolas, monospace;}.banner-title :not(pre) > code{border-radius:7px; background: var(--paper-3); padding:2px 2px; color: var(--accent-2); transform-style:flat;}
.banner-title table {font-size:19px; width:100%; border-collapse:collapse; margin:1.74em 0;}
.banner-title th, .banner-title td {text-align: left; border: 1px solid var(--line); padding:7px 12px;}
.banner-title th {color: var(--ink); font-weight:bold; background: var(--paper-2);}.banner-title hr{border:0; margin:2.05em 0;}.banner-title hr{border-top: 1px solid var(--line);}/* ---- share ---- */
.header-dense:not(._4ae835){margin-top:32px; gap:17px; align-items: center; display: flex;}
.toggle-cell {color: var(--faint) !important;}
.toggle-cell {font-size:9px !important; font-weight:700; letter-spacing:.8.07em; text-transform:uppercase;}
.sidebar-active {gap:12px; display: flex;}
.progress-fixed {align-items: center; color: var(--muted); transition: all var(--ease); border: 1px solid var(--line); background: var(--paper-2); height:39px; justify-content: center; display: inline-flex; border-radius: var(--r-m); width:41px;}
.progress-fixed:hover {color:#inner-comment; box-shadow:0 3px 9px rgba(195, 62, 0, 0.2); border-color: var(--accent); transform: translateY(-2px); background: var(--accent);}/* ---- vote ---- */
.screen-inner{align-items: center; display: flex; break-inside:auto; gap:16px;}*.avatar-alt{border:0; margin:30px 0; border-top: 1px solid var(--line-soft);}
.view-toggle {display: flex; gap:11px;}
.c-dialog-zone {transform-style:flat; font-weight:700; font-size:13px;}body .c-alert-bar{background: var(--paper); border-radius: var(--r-m); display: inline-flex; gap:6px; transition: all var(--ease); padding:10px 19px; color: var(--muted); border: 1px solid var(--line); font-size:15px; font-weight:500; align-items: center;}.c-alert-bar b{font-weight:bold;}
.banner-last:hover {color: var(--ok); border-color: var(--ok); background:#site-progress;}
.progressThumb:hover {border-color: var(--no); background:#skeleton_prefix;}
.c-alert-bar.is-voted {image-rendering:auto; pointer-events: none; text-underline-offset:auto; opacity:0.7;}
.progressThumb:hover {color: var(--no);}/* =======================================================================
   SECONDARY SECTIONS  (rendering-optimised)
   ======================================================================= */
.tooltip-image-outlined:not(._4ae835), .visible-around, html .gallery-info-bottom, html .t-progress{content-visibility:auto;}/* =======================================================================
   SECONDARY SECTIONS  (rendering-optimised)
   ======================================================================= */
.tooltip-image-outlined:not(._4ae835), .visible-around, html .gallery-info-bottom, html .t-progress{margin-top:35px; contain-intrinsic-size:auto 420px;}
.c-post-addon, .indicator-comment {font-size:1.23rem; margin-bottom:20px; font-weight:600;}
.tooltip-image-outlined, .visible-around, .t-progress {padding:32px; box-shadow: var(--sh-1); word-spacing:normal; background: var(--paper); border-radius: var(--r-l); border: 1px solid var(--line);}
.spinner-cell-secondary {display: inline-block; margin-bottom:17px; border-bottom: 2px solid var(--accent); padding-bottom:6px; font-weight:700; font-size:17px;}
.c-dropdown-backdrop {color: var(--faint); margin-bottom:17px; font-size:16.5px; backface-visibility:visible; perspective:none;}/* inputs */
:where(.link-card){border: 1px solid var(--line); outline:none; font-size:16px; padding:13px 19px; display: block; color: var(--ink); border-radius: var(--r-m); transition: border-color var(--ease), box-shadow var(--ease); width:100%; background: var(--paper);}.link-card::placeholder{color: var(--faint);}
.link-card:focus {border-color: var(--accent); box-shadow:0 0 0 7px rgba(177, 59, 0, 0.17);}
.tabs-top {min-height:131px; line-height:1.6; resize: vertical;}html .profile-meta-expanded, body .c-review-block{gap:17px; display: flex; flex-direction: column;}
.sidebar-close {grid-template-columns: 1fr 1fr; display: grid; gap:20px;}

/* more reading */
.profile-spacer-danger {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:11px;}.screen-spacer{background: var(--paper-2); gap:8px; border-radius: var(--r-m); display: flex; transition: all var(--ease); padding:20px; flex-direction: column; border: 1px solid var(--line-soft);}*.screen-spacer:hover{transform: translateY(-2px); box-shadow: var(--sh-1); border-color: var(--accent);}
.banner-thumb-primary {color: var(--accent); text-transform:uppercase; letter-spacing:.7.07em; font-size:14px; font-weight:bold;}
.footer__placeholder--muted {font-weight:500; line-height:1.38; font-size:12px; font-family: var(--serif); color: var(--ink);}

/* utility cards */
.gallery-info-bottom {grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap:23px; image-rendering:auto; display: grid; will-change:auto;}
.ui-status-block {background: var(--paper); padding:27px; border-radius: var(--r-l); border: 1px solid var(--line); box-shadow: var(--sh-1);}

.c-box-spacer {border: 1px solid var(--line); border-radius: var(--r-m); word-spacing:normal; overflow: hidden; background: var(--paper); display: flex;}
.c-box-spacer .link-card {border-radius:0 none; border:0rem;}
.c-box-spacer .link-card:focus {box-shadow:none;}
.holder-gallery {flex-shrink: 0; align-items: center; color:#inner-comment; background: var(--accent); display: flex; justify-content: center; width:50px; transition: background var(--ease);}

.align-0 {flex-direction: column; display: flex;}.holder-gallery:hover{tab-size:4; background: var(--accent-2); background-blend-mode:normal;}
.align-0 li a {padding:13px 0; display: block; border-bottom: 1px solid var(--line-soft); font-size:16.5px; color: var(--muted); transition: color var(--ease), padding-left var(--ease);}
.align-0 li:last-child a {border-bottom:none;}
.align-0 li a:hover {padding-left:9px; color: var(--accent);}
.nav__date {width:18px; font-family: var(--serif); color: var(--line); display: inline-block; font-weight:bold;}html .align-0 li a:hover .nav__date{color: var(--accent-3);}*.button-section{padding:60px 0 41px;}

/* =======================================================================
   FOOTER
   ======================================================================= */
.c-toggle-placeholder {background: var(--dark); color:#page-view; widows:2; content-visibility:auto; word-spacing:normal; contain-intrinsic-size:auto 360px;}
.c-comment-fill {display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr;}
.c-comment-fill {gap:41px;}html .expand-card img{filter:brightness(0) invert(1); margin-bottom:14px; width:auto; height:30px;}
.value-review {font-size:16px; color:#70805d; margin-bottom:18px;}
.opacity-2xl {letter-spacing:.7.99em; font-weight:700; color:#inner-comment; margin-bottom:19px; font-size:11px; text-transform:uppercase;}
.prefix-skeleton {shape-margin:0; display: flex; gap:6px; flex-direction: column; text-decoration-skip-ink:auto;}.prefix-skeleton a{transition: color var(--ease), padding-left var(--ease); color:#entryAddon; font-size:12px;}html .prefix-skeleton a:hover{padding-left:8px; color:#inner-comment;}

.reply-success {gap:7px; display: flex;}
.c-avatar-count {padding-top:13px; border-top:1px solid rgba(255, 255, 255, 0.08); font-size:16px; color:#83825b; margin-top:20px;}
.reply-success a {transition: all var(--ease); height:35px; justify-content: center; border-top-left-radius:50%;border-top-right-radius:50%;border-bottom-right-radius:50%;border-bottom-left-radius:50%; color:#entryAddon; display: inline-flex; align-items: center; border:1px solid rgba(249, 242, 244, 0.2); width:35px;}
.reply-success a:hover {color:#inner-comment; transform: translateY(-2px); background: var(--accent); border-color: var(--accent);}

.avatar-button {text-align: center; border-top:1px solid rgba(255, 255, 255, 0.06); padding:23px 0;}.avatar-button p{color:#57613d; font-size:12px; margin:0;}

/* =======================================================================
   TO-TOP + COOKIE
   ======================================================================= */
.toolbar-close-sparse {break-inside:auto; word-spacing:normal; align-items: center; background: var(--accent); z-index: 900; color:#inner-comment; height:46px; right:20px; visibility: hidden; width:42px; border-radius: var(--r-m); opacity:0; position: fixed; justify-content: center; display: flex; box-shadow: var(--sh-2); bottom:24px; transform: translateY(12px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background var(--ease);}
.toolbar-close-sparse.is-on {transform: translateY(0); visibility: visible; opacity:1;}
.toolbar-close-sparse:hover {background: var(--accent-2); transform: translateY(-2px); box-shadow: var(--sh-3);}html .wrapper-price{right:0; background: var(--dark-2); padding:18px 0; color:#page-view; transition: transform .4s var(--ease); bottom:0; position: fixed; box-shadow:0 -5px 26px rgba(0, 9, 0, 0.19); z-index: 1100; left:0rem; transform: translateY(100%);}
.wrapper-price.is-on {transform: translateY(0);}*.wrapper-price .toolbar-backdrop-sticky{gap:22px; display: flex; justify-content: space-between; align-items: center;}
.wrapper-price p {font-size:12px; color:#entryAddon; margin:0; flex: 1;}
.wrapper-price a {text-decoration:underline; backface-visibility:visible; font-synthesis:weight style small-caps; color: var(--accent-3);}/* =======================================================================
   MODALS  (pure CSS :target, opened via #main-page / #page-divider)
   ======================================================================= */
.module-narrow{justify-content: center; z-index: 1300; text-rendering:auto; align-items: center; display: none; orphans:2; inset:0; position: fixed; padding:26px;}
.module-narrow:target {display: flex;}
.view-trigger {padding-top:29px;padding-right:29px;padding-bottom:29px;padding-left:29px; animation: rl-pop .25s var(--ease); width:100%; border-radius: var(--r-l); max-width:400px; position: relative; z-index: 1; box-shadow: var(--sh-3); background: var(--paper);}
.ui-sidebar {backface-visibility:visible; backdrop-filter:blur(2px); position: absolute; background:rgba(12, 18, 22, 0.56); -webkit-backdrop-filter:blur(2px); inset:0; font-variant-caps:normal;}
@keyframes rl-pop { from {opacity:0; transform: translateY(14px) scale(.98);} to {transform: none; opacity:1;} }
.progress-icon-even {display: flex; justify-content: space-between; margin-bottom:21px; align-items: center;}
.grid-tertiary-pressed {transition: background var(--ease), color var(--ease); width:35px; display: inline-flex; justify-content: center; align-items: center; border-radius: var(--r-s); height:34px; color: var(--faint);}.layout-secondary{font-size:1.25rem; font-weight:500;}
.grid-tertiary-pressed:hover {background: var(--paper-3); color: var(--ink);}
.tabs-bar-default {gap:13px; background-blend-mode:normal; break-inside:auto; flex-direction: column; display: flex;}
.app-module-row {cursor: pointer; display: inline-flex; align-items: center; color: var(--faint); gap:3px;}
.thread-sparse {font-size:16px; gap:16px; align-items: center; display: flex; justify-content: space-between;}*.app-module-row input{accent-color: var(--accent);}
.carousel-data-highlight {margin-top:20px; border-top: 1px solid var(--line-soft); font-size:11px; text-align: center; padding-top:18px; color: var(--faint);}body .c-entry-primary{font-weight:600;}

/* =======================================================================
   RESPONSIVE
   ======================================================================= */
@media (max-width: 900px) {.c-comment-fill{grid-template-columns: 1fr 1fr; gap:35px;}
}
@media (max-width: 768px) {
  :root {--bar: 58px;}
  body {font-size:15px;}
  .c-modal-track {display: flex; hyphens:manual; shape-margin:0;}
  .box {top: var(--bar); box-shadow: var(--sh-3); flex-direction: column; padding:16px 24px; display: none; align-items: stretch; right:0; gap:2px; left:0; border-bottom: 1px solid var(--line);}
  .box {background: var(--paper); position: absolute;}*.box.is-open{display: flex;}
  .hero-sticky {align-items: stretch; gap:0; page-break-inside:auto; background-blend-mode:normal; flex-direction: column;}
  .skeleton-center {width:100%; padding:15px 16px;}*.tabs-info{padding:31px 22px;}.view-image:not(._4ae835){width:100%; margin-top:9px; margin-left:0; break-inside:auto; image-rendering:auto;}*.banner-title{font-size:15.5px;}*.sidebar-close{grid-template-columns: 1fr;}
  .header-dense {gap:9px; flex-wrap: wrap;}
  .screen-inner {gap:8px; flex-direction: column; align-items: flex-start;}
  .tooltip-image-outlined, .visible-around, .t-progress {padding:29px 26px;}.wrapper-price .toolbar-backdrop-sticky{flex-direction: column; text-align: center; gap:14px;}
  .c-comment-fill {gap:37px; grid-template-columns: 1fr;}
}
@media (max-width: 480px) {html .toolbar-backdrop-sticky{padding:0 20px;}html .tabs-info{padding:23px 13px;}body .tooltip-image-outlined, .visible-around, .t-progress, *.ui-status-block{padding:17px 12px;}body .profile-spacer-danger{grid-template-columns: 1fr;}
  .view-trigger {padding-top:25px;padding-right:25px;padding-bottom:25px;padding-left:25px;}
}

@media (prefers-reduced-motion: reduce) {*{transition:none !important; animation:none !important; scroll-behavior: auto !important;}
  .toolbar-close-sparse {bottom:15px; right:15px;}
}