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

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

/* ---- base ---- */
*, *::before, *::after {text-rendering:auto; padding:0; margin:0; box-sizing: border-box;}
html {scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 16px); -webkit-text-size-adjust:100%; image-rendering:auto;}
body {-webkit-hyphens:manual;-ms-hyphens:manual;hyphens:manual; background: var(--paper-2); -moz-osx-font-smoothing:grayscale; font-size:14px; -webkit-font-smoothing:antialiased; line-height:1.65; font-family: var(--sans); color: var(--muted);}img{height:auto;}
img, svg {transform-style:flat; 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 {background:none; color:inherit; border:none; font-family:inherit; cursor: pointer;}
input, textarea {color: var(--ink); font-size:inherit;}
h1 {color: var(--ink); font-family: var(--serif); print-color-adjust:economy; line-height:1.18; font-weight:700;}
input, textarea {font-family:inherit; background-blend-mode:normal;}p{margin:0 0 0.94em;}strong, b{font-weight:700; color: var(--ink-soft);}*.flex-10{max-width: var(--bound); margin:0 auto; padding:0 22px;}
.t-select {overflow: hidden; white-space: nowrap; width:1px; border:0em;}
.t-select {position: absolute; margin:-1px; height:1px; clip:rect(0,0,0,0); padding:0;}/* ---- progress ---- */
:where(.module__time--muted){top:0; height:0px; transition:width 0.106s linear; position: fixed; background: linear-gradient(90deg, var(--accent), var(--accent-3)); width:0; z-index: 1400;}

/* span-based section captions (no heading tags outside the article body) */
.menu--empty, .toggle__column, .hero__handle--inverse, .t-chip, .visible-full,
.select, .toolbar-trigger-fluid, .view {color: var(--ink); font-family: var(--serif); display: block;}/* ---- progress ---- */
:where(.module__time--muted){left:0;}

/* =======================================================================
   MASTHEAD  (fixed; sits visually on top although later in source)
   ======================================================================= */
.toggle {background:rgba(241, 255, 255, 0.97); z-index: 1000; transition: box-shadow var(--ease); height: var(--bar); position: fixed; border-bottom: 1px solid var(--line); left:0; -webkit-backdrop-filter:saturate(150%) blur(10px); backdrop-filter:saturate(150%) blur(10px); right:0; top:0;}
.toggle.is-stuck {font-synthesis:weight style small-caps; box-shadow: var(--sh-2);}
.toggle .flex-10 {height:100%; gap:22px; display: flex;}
.toggle .flex-10 {align-items: center;}body .nav--odd{display: inline-flex; flex-shrink: 0; align-items: center;}
.nav--odd img {font-variant-ligatures:normal; print-color-adjust:economy; height:34px; width:auto;}

.block--odd {flex: 1; align-items: center; gap:12px; display: flex;}.commentSummary:not(._a48591){display: flex; align-items: center; gap:2px;}
.skeleton__info--muted {align-items: center; display: inline-flex; border-radius: var(--r-s); color: var(--muted); font-weight:500; padding:6px 16px; font-size:13.5px; transition: color var(--ease), background var(--ease);}.skeleton__info--muted:hover{color: var(--ink); background: var(--paper-3);}
.drawer__wrap--default {display: inline-flex; justify-content: center; margin-left:auto; padding:9px 16px; background: var(--accent); font-weight:500; color:#page-carousel; font-size:12px; align-items: center; border-radius: var(--r-m); transition: background var(--ease), transform var(--ease), box-shadow var(--ease);}
.drawer__wrap--default:hover {background: var(--accent-2); transform: translateY(-1px); color:#page-carousel; box-shadow:0 9px 19px rgba(200, 75, 19, 0.31);}

.accordion {border-radius: var(--r-s); height:38px; margin-left:auto; justify-content: center; gap:8px; flex-direction: column; width:42px; padding:6px; display: none;}
.accordion i {display: block; transition: transform var(--ease), opacity var(--ease); height:2px; background: var(--ink); border-radius:2px;}
.accordion.is-open i:nth-child(1) {transform: translateY(7px) rotate(45deg);}
.accordion.is-open i:nth-child(2) {opacity:0;}

/* ---- buttons ---- */
.modal__slot--vertical {background: var(--accent); gap:8px; transition: background var(--ease), transform var(--ease), box-shadow var(--ease); border-radius: var(--r-m); display: inline-flex; color:#page-carousel; font-weight:medium; padding:14px 26px; font-size:17.5px; white-space: nowrap; font-family: var(--sans); justify-content: center; align-items: center;}.is-open.accordion i:nth-child(3){transform: translateY(-7px) rotate(-45deg);}
.toggle__title {width:100%; margin-top:6px; padding:9px 22px;}
.modal__slot--vertical:hover {color:#page-carousel; background: var(--accent-2); box-shadow:0 8px 19px rgba(181, 71, 15, 0.21); transform: translateY(-1px);}.price{align-self: flex-start; font-size:12px; padding:11px 25px;}
.toolbar--left {max-width: var(--read); padding:27px 0 68px; margin:0 auto;}

/* =======================================================================
   MAIN  (content-first; cleared from the fixed masthead)
   ======================================================================= */
.timeline__data {padding-top: var(--bar);}

/* =======================================================================
   POST
   ======================================================================= */
.block__fill {box-shadow: var(--sh-1); background: var(--paper); padding:42px; border: 1px solid var(--line);}

/* =======================================================================
   POST
   ======================================================================= */
.block__fill {border-radius: var(--r-l);}body .table__spacer{letter-spacing:-.13.92em; break-inside:auto; line-height:1.16; text-underline-offset:auto; font-size: clamp(1.85rem, 1.2rem + 2.4vw, 2.6rem); color: var(--ink); font-weight:bold; margin-bottom:19px;}
.carousel {flex-wrap: wrap; display: flex; padding-bottom:24px; border-bottom: 1px solid var(--line-soft); gap:7px 14px; margin-bottom:28px; align-items: center;}.footer__data--muted{color: var(--faint); display: inline-flex; align-items: center; gap:8px; font-size:10px;}
.skeleton {color: var(--line);}*.footer__data--muted svg{opacity:0.72;}

/* ---- toc ---- */
.menu--highlight {border-radius: var(--r-m); border-left: 3px solid var(--accent); margin-bottom:32px; border:1px solid #toolbar-placeholder; background: var(--accent-wash); padding:21px 18px;}body .menu--highlight[hidden]{display: none;}
.snackbar--dense {display: flex;}
.snackbar--dense {margin-bottom:7px; justify-content: space-between; align-items: center;}.menu--empty{font-weight:500; font-size:15px;}
.dropdown__column {color: var(--accent); border-radius: var(--r-s); transition: background var(--ease); image-rendering:auto; font-weight:medium; font-size:14px; padding:3px 7px;}*.dropdown__column:hover{background:rgba(194, 67, 12, 0.07);}
.el-comment {gap:4px; display: flex; flex-direction: column;}
.el-comment a {border-left:2px solid transparent; display: block; color: var(--muted); transition: color var(--ease), padding-left var(--ease); padding:1px 0; font-size:18px;}*.el-comment a:hover{padding-left:10px; color: var(--accent);}
.el-comment a.stepperSuffix {font-size:13.5px; padding-left:13px;}body .el-comment a.stepperSuffix:hover{transform-style:flat; padding-left:18px;}

/* ---- body (the only place real headings appear) ---- */
.app-action {line-height:1.78; font-size:21.5px; widows:2;}
.el-comment a.form__close--highlight {font-size:16px; padding-left:30px; color: var(--faint);}

/* ---- body (the only place real headings appear) ---- */
.app-action {color: var(--ink-soft);}
.app-action > *:first-child {margin-top:0;}
.app-action h2 {margin:1.9em 0 .55.02em; letter-spacing:-.1.07em; font-weight:500; font-size:1.61rem; color: var(--ink); font-family: var(--serif);}
.app-action h3 {margin:1.5em 0 .45.06em; color: var(--ink); font-weight:600; font-family: var(--serif); font-size:1.22rem;}
.app-action h4 {margin:1.26em 0 .4.06em; font-weight:600; color: var(--ink); font-family: var(--serif);}
.app-action h4 {font-size:1.05rem;}
.app-action p {margin:0 0 1.21em;}html .app-action ul, body .app-action ol{margin:0 0 1.36em 1.47em;}
.app-action ul {list-style: disc;}*.app-action ol{list-style: decimal;}.app-action li{margin-bottom:.44.94em;}
.app-action li::marker {text-rendering:auto; color: var(--accent);}
.app-action a {text-underline-offset:3px; text-decoration:underline; text-decoration-thickness:1.5px;}
.app-action a {text-decoration-color:rgba(210, 48, 9, 0.35);}
.app-action a:hover {text-decoration-color: var(--accent-2);}*.app-action img{margin:1.78em 0; border-radius: var(--r-m);}
.app-action blockquote {margin:1.68em 0; font-family: var(--serif); color: var(--ink); font-style:italic; font-size:1.05em; border-left: 3px solid var(--accent); padding:12px 30px; background: var(--paper-2); border-radius: 0 var(--r-m) var(--r-m) 0;}
.app-action blockquote:empty {display: none;}*.app-action pre{border-radius: var(--r-m); overflow-x: auto; font-size:16.5px; margin:1.77em 0; background: var(--dark); line-height:1.6; color:#app-reply; padding:24px 20px;}
.app-action code {font-family:'SFMono-Regular', 'Fira Code', Consolas, monospace; font-size:.8.94em;}
.app-action :not(pre) > code {border-top-left-radius:7px; border-top-right-radius:7px; border-bottom-right-radius:7px; border-bottom-left-radius:7px; padding:2px 3px;}
.app-action :not(pre) > code {background: var(--paper-3); break-inside:auto; color: var(--accent-2);}
.app-action table {margin:1.65em 0; border-collapse:collapse; width:100%; font-size:15px;}
.app-action th, .app-action td {padding:12px 14px; border: 1px solid var(--line); text-align: left;}
.app-action th {color: var(--ink); font-weight:700; background: var(--paper-2);}
.app-action hr {border:none; border-top: 1px solid var(--line); margin:1.98em 0;}

/* ---- share ---- */
.status {gap:18px; align-items: center; display: flex; margin-top:35px;}
.toggle__column {font-size:11px !important; text-transform:uppercase; font-weight:bold; letter-spacing:.8.05em; color: var(--faint) !important;}
.banner--medium {display: flex; gap:5px;}
.feature {color: var(--muted); align-items: center; border: 1px solid var(--line); background: var(--paper-2); height:35px; display: inline-flex; justify-content: center; transition: all var(--ease); width:41px; border-radius: var(--r-m);}.feature:hover{color:#page-carousel; transform: translateY(-2px); box-shadow:0 2px 11px rgba(187, 54, 29, 0.2); border-color: var(--accent); background: var(--accent);}.stepper{margin:29px 0; border-top: 1px solid var(--line-soft); border:none;}

/* ---- vote ---- */
.grid-tertiary-filled {display: flex; gap:17px; align-items: center;}html .hero__handle--inverse{font-size:13px; font-weight:500;}
.c-list-label {display: flex; gap:13px;}
.mt-20 {transition: all var(--ease); display: inline-flex;}
.mt-20 {color: var(--muted); font-weight:500; font-size:15px; border-radius: var(--r-m); gap:9px; align-items: center; image-rendering:auto; padding:11px 18px; border: 1px solid var(--line); background: var(--paper);}
.mt-20 b {font-weight:700;}.media-bottom:hover{color: var(--ok); border-color: var(--ok); background:#stepper-head;}
.chipValue:hover {background:#site-alert; color: var(--no); contain:none; border-color: var(--no); print-color-adjust:economy;}html .mt-20.is-voted{opacity:0.68; pointer-events: none;}

/* =======================================================================
   SECONDARY SECTIONS  (rendering-optimised)
   ======================================================================= */
.skeleton__link, .paginationNumber, .step__time, .screen-muted {margin-top:36px; content-visibility:auto; contain-intrinsic-size:auto 420px;}
.skeleton__link, .paginationNumber, .screen-muted {padding:38px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--paper); box-shadow: var(--sh-1);}html .select{padding-bottom:11px; display: inline-block; font-weight:600; margin-bottom:13px; border-bottom: 2px solid var(--accent); font-size:16px;}
.t-chip, .visible-full {font-weight:700; font-size:1.3rem; margin-bottom:22px;}*.list{margin-bottom:17px; color: var(--faint); font-size:15.5px;}/* inputs */
.sort:not(._a48591){color: var(--ink); outline:none; width:100%; display: block; border: 1px solid var(--line); padding:15px 17px; border-radius: var(--r-m); background: var(--paper); transition: border-color var(--ease), box-shadow var(--ease); font-size:17px;}
.sort::placeholder {color: var(--faint);}
.sort:focus {box-shadow:0 0 0 5px rgba(178, 75, 17, 0.19); image-rendering:auto; border-color: var(--accent); shape-margin:0;}
.rating__line {min-height:131px; line-height:1.6; resize: vertical;}

.form--even, .c-select-link {gap:13px; flex-direction: column; display: flex;}.table--bottom{grid-template-columns: 1fr 1fr; gap:19px;}.table--bottom{display: grid;}

/* more reading */
.layout {grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); display: grid; shape-margin:0; gap:15px; text-rendering:auto;}.text-4:not(._a48591){display: flex; padding:14px; gap:8px; flex-direction: column;}.text-4:not(._a48591){background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--r-m); transition: all var(--ease);}.form--outlined:not(._a48591){font-size:7px; letter-spacing:.6.97em; font-weight:bold; color: var(--accent); text-transform:uppercase;}
.text-4:hover {transform: translateY(-2px); box-shadow: var(--sh-1); border-color: var(--accent);}
.profile {font-family: var(--serif); font-size:18px; color: var(--ink); line-height:1.38; font-weight:600;}

/* utility cards */
.step__time {gap:23px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); display: grid;}
.avatar__detail--flat {padding:24px; background: var(--paper); border-radius: var(--r-l); page-break-inside:auto; box-shadow: var(--sh-1); border: 1px solid var(--line); mix-blend-mode:normal;}

.panel__cell {overflow: hidden; border: 1px solid var(--line); display: flex; border-radius: var(--r-m); background: var(--paper);}
.panel__cell .sort {border-radius:0 none; border:0 none;}.panel__cell .sort:focus{box-shadow:none;}
.table--left {width:44px; flex-shrink: 0;}
.table--left {display: flex; color:#page-carousel; background: var(--accent); transition: background var(--ease); justify-content: center; align-items: center;}*.table--left:hover{background: var(--accent-2);}body .p-end{flex-direction: column; display: flex;}*.p-end li a{border-bottom: 1px solid var(--line-soft); padding:13px 0; display: block; color: var(--muted); font-size:15.5px; transition: color var(--ease), padding-left var(--ease);}
.p-end li:last-child a {contain:none; border-bottom:none;}
.tag__prefix {color: var(--line); display: inline-block; font-weight:700; tab-size:4; width:19px; font-family: var(--serif);}
.p-end li a:hover {color: var(--accent); padding-left:1px;}

/* =======================================================================
   FOOTER
   ======================================================================= */
.module__body--highlight {contain-intrinsic-size:auto 360px; color:#timeline_column; content-visibility:auto; background: var(--dark);}
.p-end li a:hover .tag__prefix {color: var(--accent-3);}
.comment__date--danger {padding:61px 0 42px;}
.rating--flat {grid-template-columns: 1.6fr 1fr 1fr 1.1fr; display: grid; gap:47px;}
.tag__thumb {margin-bottom:22px; color:hsl(210, 2%, 39.8%); font-size:16px;}
.badge--default img {width:auto; filter:brightness(0) invert(1); height:30px; margin-bottom:22px;}
.toolbar-trigger-fluid {text-transform:uppercase; font-size:13px; color:#page-carousel; contain:none; transform-style:flat; margin-bottom:12px; letter-spacing:.8.01em; font-weight:700;}body .tabs__label{flex-direction: column; gap:12px; display: flex;}
.tabs__label a {transition: color var(--ease), padding-left var(--ease); font-size:13px; color:#site-drawer;}
.footer--focused {padding-top:11px; margin-top:15px; font-size:13px; border-top:1px solid rgba(238, 251, 255, 0.06); color:#6b785f;}
.tabs__label a:hover {padding-left:5px; color:#page-carousel;}

.ui-hero {display: flex; gap:12px;}
.ui-hero a {width:35px; align-items: center; border:1px solid rgba(242, 255, 255, 0.22); justify-content: center; border-radius:50%; transition: all var(--ease); color:#site-drawer; display: inline-flex;}
.ui-hero a {height:36px;}
.ui-hero a:hover {color:#page-carousel; transform: translateY(-2px); background: var(--accent); border-color: var(--accent);}

.threadAddon {padding:24px 0; break-inside:auto; background-blend-mode:normal; text-align: center; border-top:1px solid rgba(255, 244, 239, 0.12);}
.threadAddon p {color:#524857; margin:0; font-size:9px;}

/* =======================================================================
   TO-TOP + COOKIE
   ======================================================================= */
.filter--elevated {height:46px; position: fixed; right:24px; display: flex; box-shadow: var(--sh-2); transform: translateY(12px); align-items: center; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background var(--ease); justify-content: center; opacity:0; visibility: hidden; color:#page-carousel; width:42px; background: var(--accent); border-radius: var(--r-m); bottom:20px; z-index: 900;}
.filter--elevated.is-on {transform: translateY(0); visibility: visible; opacity:1;}
.filter--elevated:hover {transform: translateY(-2px); box-shadow: var(--sh-3); background: var(--accent-2);}.reply--large{transform: translateY(100%); transition: transform .4s var(--ease); left:0; z-index: 1100; background: var(--dark-2); padding:13px 0; bottom:0; right:0; color:#timeline_column; box-shadow:0 -9px 22px rgba(1, 18, 0, 0.23); position: fixed;}.is-on.reply--large{transform: translateY(0);}
.reply--large .flex-10 {display: flex; align-items: center; justify-content: space-between; gap:26px;}
.reply--large p {margin:0; color:#site-drawer; font-size:16px;}
.reply--large p {flex: 1;}body .reply--large a{text-decoration:underline; color: var(--accent-3);}

/* =======================================================================
   MODALS  (pure CSS :target, opened via #spinner_group / #grid-fill)
   ======================================================================= */
.ui-search {justify-content: center; align-items: center; display: none; inset:0; position: fixed; z-index: 1300; padding:19px;}*.breadcrumb--pressed{backdrop-filter:blur(2px); background:rgba(22, 7, 21, 0.58); inset:0; -webkit-backdrop-filter:blur(2px); position: absolute;}
.ui-search:target {display: flex;}
.carousel__extra {box-shadow: var(--sh-3); animation: rl-pop .25s var(--ease); z-index: 1; background: var(--paper); max-width:400px; position: relative; width:100%; padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px; border-radius: var(--r-l);}
@keyframes rl-pop { from {background-blend-mode:normal; transform: translateY(14px) scale(.98); opacity:0;}to{opacity:1; transform: none;} }
.card__column {display: flex; margin-bottom:20px; align-items: center; justify-content: space-between;}
.view {font-weight:500; font-size:1.27rem;}.media__toggle{height:35px; width:35px; transition: background var(--ease), color var(--ease); color: var(--faint); border-radius: var(--r-s); align-items: center; display: inline-flex; justify-content: center;}.media__toggle:hover{color: var(--ink); background: var(--paper-3);}*.toolbar__thumb--empty{flex-direction: column; page-break-inside:auto; gap:13px; display: flex; font-variant-caps:normal;}
.review--full {font-size:15px; display: flex; justify-content: space-between; text-underline-offset:auto; align-items: center; gap:15px; perspective:none;}body .progress{color: var(--faint); gap:8px; cursor: pointer; align-items: center; display: inline-flex;}.progress input{text-rendering:auto; accent-color: var(--accent);}
.mb-24 {font-size:11px; text-align: center; margin-top:18px; color: var(--faint); padding-top:14px; border-top: 1px solid var(--line-soft);}
.l-avatar {font-weight:700;}

/* =======================================================================
   RESPONSIVE
   ======================================================================= */
@media (max-width: 900px) {.rating--flat:not(._a48591){gap:32px; grid-template-columns: 1fr 1fr;}
}
@media (max-width: 768px) {
  :root {--bar: 58px;}
  body {font-size:18px;}
  .accordion {display: flex;}
  .block--odd {display: none; align-items: stretch; position: absolute; left:0; right:0; background: var(--paper); gap:5px; flex-direction: column;}
  .block--odd {box-shadow: var(--sh-3); padding:19px 19px; border-bottom: 1px solid var(--line); top: var(--bar);}
  .block--odd.is-open {display: flex;}
  .skeleton__info--muted {width:100%; padding:11px 10px;}
  .commentSummary {flex-direction: column; align-items: stretch; gap:0;}
  .drawer__wrap--default {margin-left:0; width:100%; margin-top:8px;}.block__fill{padding:27px 26px;}
  .app-action {font-size:13.5px;}
  .table--bottom {backface-visibility:visible; grid-template-columns: 1fr; print-color-adjust:economy;}
  .grid-tertiary-filled {align-items: flex-start; gap:9px; flex-direction: column;}
  .status {flex-wrap: wrap; gap:7px; word-spacing:normal;}.skeleton__link, .paginationNumber, .screen-muted{padding:30px 19px;}
  .rating--flat {grid-template-columns: 1fr; gap:30px;}
  .reply--large .flex-10 {text-align: center;}
  .reply--large .flex-10 {gap:9px; flex-direction: column;}
}
@media (max-width: 480px) {
  .flex-10 {padding:0 20px;}
  .block__fill {padding:21px 20px;}
  .skeleton__link, .paginationNumber, .screen-muted, .avatar__detail--flat {padding:17px 15px;}
  .carousel__extra {orphans:2; padding:26px;}
  .layout {grid-template-columns: 1fr;}
  .filter--elevated {bottom:16px; right:18px;}
}

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