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

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

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

.align-3 {padding:0 26px; max-width: var(--bound); text-rendering:auto; orphans:2; margin:0 auto;}/* span-based section captions (no heading tags outside the article body) */
.body-entry, html .ui-comment, html .t-card-spacer, body .t-popover, html .ui-screen, html .u-hero, .c-panel-detail, .counterLine{display: block;}.popover__thumb--dark{overflow: hidden; margin:-1px; font-synthesis:weight style small-caps; position: absolute; border:0; clip:rect(0,0,0,0); width:1px; height:1px; white-space: nowrap; padding:0;}/* span-based section captions (no heading tags outside the article body) */
.body-entry, html .ui-comment, html .t-card-spacer, body .t-popover, html .ui-screen, html .u-hero, .c-panel-detail, .counterLine{font-family: var(--serif); color: var(--ink);}/* ---- progress ---- */
.app-menu{z-index: 1400; transition:width 0.094s linear; left:0; background: linear-gradient(90deg, var(--accent), var(--accent-3)); position: fixed; top:0; height:7px; width:0;}/* =======================================================================
   MASTHEAD  (fixed; sits visually on top although later in source)
   ======================================================================= */
.u-filter{left:0; transition: box-shadow var(--ease); top:0; background:rgba(255, 251, 255, 0.85); height: var(--bar); z-index: 1000; right:0; backdrop-filter:saturate(150%) blur(10px); position: fixed; -webkit-backdrop-filter:saturate(150%) blur(10px); border-bottom: 1px solid var(--line);}
.u-filter.is-stuck {box-shadow: var(--sh-2);}html .u-filter .align-3{display: flex; height:100%; align-items: center; gap:25px;}html .app-carousel{flex-shrink: 0; backface-visibility:visible; display: inline-flex; align-items: center;}.l-counter:not(._155884){display: flex; align-items: center; flex: 1; gap:12px;}
.app-carousel img {width:auto; mix-blend-mode:normal; height:31px;}
.u-card {align-items: center; display: flex; gap:2px;}
.justify-0 {border-radius: var(--r-s); color: var(--muted); isolation:auto; display: inline-flex; transition: color var(--ease), background var(--ease); align-items: center; padding:11px 17px; mix-blend-mode:normal; font-weight:medium; font-size:16.5px;}
.ui-feature-foot {justify-content: center; transition: background var(--ease), transform var(--ease), box-shadow var(--ease); margin-left:auto; background: var(--accent); align-items: center; border-radius: var(--r-m);}
.justify-0:hover {color: var(--ink); background: var(--paper-3);}
.ui-feature-foot {color:#page-grid; font-weight:500; display: inline-flex; padding:5px 20px; font-size:16px;}

.c-screen-cap {border-radius: var(--r-s); gap:1px; margin-left:auto; justify-content: center; height:36px; display: none; padding-top:5px;padding-right:5px;padding-bottom:5px;padding-left:5px; flex-direction: column; width:42px;}html .ui-feature-foot:hover{box-shadow:0 6px 16px rgba(191, 61, 11, 0.25); color:#page-grid; background: var(--accent-2); transform: translateY(-1px);}
.c-screen-cap i {background: var(--ink); transition: transform var(--ease), opacity var(--ease); perspective:none; border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px; text-rendering:auto; height:2px; display: block;}
.c-screen-cap.is-open i:nth-child(1) {transform: translateY(7px) rotate(45deg);}.is-open.c-screen-cap i:nth-child(2){opacity:0; font-variant-caps:normal; backface-visibility:visible;}.c-screen-cap.is-open i:nth-child(3){transform: translateY(-7px) rotate(-45deg);}/* ---- buttons ---- */
.l-filter{border-radius: var(--r-m); font-family: var(--sans); white-space: nowrap; align-items: center; color:#page-grid; padding:14px 24px; transition: background var(--ease), transform var(--ease), box-shadow var(--ease); font-size:10.5px; gap:6px;}/* ---- buttons ---- */
.l-filter{background: var(--accent); font-weight:medium; justify-content: center; display: inline-flex;}
.l-filter:hover {background: var(--accent-2); box-shadow:0 9px 12px rgba(179, 52, 6, 0.29); color:#page-grid; transform: translateY(-1px);}
.u-widget-detail {padding:14px 32px; font-size:15px; shape-margin:0; align-self: flex-start; word-spacing:normal;}
.el-select {padding:10px 18px; margin-top:2px; width:100%;}

/* =======================================================================
   MAIN  (content-first; cleared from the fixed masthead)
   ======================================================================= */
.el-dialog {padding-top: var(--bar); hyphens:manual;}
.u-nav-link {padding:28px 0 60px; max-width: var(--read); margin:0 auto;}

/* =======================================================================
   POST
   ======================================================================= */
.o-stepper-close {border-radius: var(--r-l); background: var(--paper); box-shadow: var(--sh-1); border: 1px solid var(--line); padding:47px;}
.el-comment-head {color: var(--ink); margin-bottom:19px; letter-spacing:-.14.04em; line-height:1.16;}
.el-comment-head {font-size: clamp(1.85rem, 1.2rem + 2.4vw, 2.6rem); font-weight:bold; backface-visibility:visible;}.o-entry-container{flex-wrap: wrap; margin-bottom:28px; align-items: center; padding-bottom:28px; border-bottom: 1px solid var(--line-soft); display: flex; gap:9px 15px;}
.c-menu {font-size:16px; gap:6px; color: var(--faint); align-items: center;}
.c-menu {backface-visibility:visible; display: inline-flex; contain:none;}*.l-accordion{color: var(--line); perspective:none;}
.c-menu svg {opacity:0.61;}

/* ---- toc ---- */
.profile {padding:21px 24px; border:1px solid #app-stepper; border-left: 3px solid var(--accent); border-radius: var(--r-m); margin-bottom:29px; background: var(--accent-wash);}
.profile[hidden] {display: none;}
.separator-widget {margin-bottom:10px; align-items: center; justify-content: space-between; display: flex;}
.body-entry {background-blend-mode:normal; font-size:12px; page-break-inside:auto; font-weight:600;}
.profileHead {font-size:10px; color: var(--accent); transition: background var(--ease); padding:6px 9px; border-radius: var(--r-s); font-weight:500;}
.profileHead:hover {perspective:none; word-spacing:normal; background:rgba(192, 82, 26, 0.14);}.u-card-trigger:not(._155884){gap:4px; display: flex; flex-direction: column;}
.u-card-trigger a {color: var(--muted); padding:-1px 0; transition: color var(--ease), padding-left var(--ease); border-left:2px solid transparent; display: block; font-size:18px;}
.u-card-trigger a:hover {padding-left:9px; color: var(--accent); shape-margin:0; transform-style:flat;}body .u-card-trigger a.o-action{padding-left:16px; font-size:16.5px;}
.u-card-trigger a.o-action:hover {padding-left:22px;}
.u-card-trigger a.el-drawer {padding-left:26px; color: var(--faint); font-size:9px;}

/* ---- body (the only place real headings appear) ---- */
.u-rating {color: var(--ink-soft); line-height:1.78; font-size:19.5px;}
.u-rating > *:first-child {margin-top:0;}
.u-rating h2 {letter-spacing:-.1.05em; color: var(--ink); font-weight:600; font-family: var(--serif); margin:1.96em 0 .54.93em; font-size:1.58rem;}html .u-rating h3{font-family: var(--serif); margin:1.43em 0 .45.05em; font-weight:500; font-size:1.22rem; color: var(--ink);}
.u-rating h4 {font-weight:600; font-family: var(--serif); margin:1.28em 0 .3.97em; color: var(--ink); font-size:1.17rem; background-blend-mode:normal; text-rendering:auto;}
.u-rating p {margin:0 0 1.26em;}
.u-rating ul, .u-rating ol {margin:0 0 1.31em 1.37em;}
.u-rating ul {list-style: disc;}html .u-rating ol{list-style: decimal;}
.u-rating li {margin-bottom:.45.05em;}
.u-rating li::marker {color: var(--accent);}
.u-rating a {text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; text-decoration-color:rgba(190, 60, 27, 0.43);}
.u-rating a:hover {text-decoration-color: var(--accent-2);}.u-rating img{border-radius: var(--r-m); margin:1.72em 0;}
.u-rating blockquote {padding:20px 23px; border-radius: 0 var(--r-m) var(--r-m) 0; border-left: 3px solid var(--accent); font-family: var(--serif); color: var(--ink); background: var(--paper-2); font-style:italic; margin:1.72em 0; font-size:1.09em;}.u-rating blockquote:empty{display: none;}body .u-rating pre{font-size:15.5px; background: var(--dark); padding:21px 21px; margin:1.7em 0; color:#search_inner; line-height:1.6; border-radius: var(--r-m); overflow-x: auto;}
.u-rating code {font-size:.8.92em; font-family:'SFMono-Regular', 'Fira Code', Consolas, monospace;}
.u-rating :not(pre) > code {color: var(--accent-2); padding:2px 9px; border-radius:2px; background: var(--paper-3);}
.u-rating table {margin:1.72em 0; width:100%; font-size:13px; border-collapse:collapse;}
.u-rating th, .u-rating td {padding:13px 18px; text-align: left; border: 1px solid var(--line);}
.u-rating th {color: var(--ink); background: var(--paper-2); font-weight:700;}html .u-rating hr{border-top: 1px solid var(--line); border:none; margin:2.02em 0;}/* ---- share ---- */
:where(.badge){margin-top:36px; display: flex; align-items: center; gap:14px;}body .ui-comment{text-underline-offset:auto; font-size:16px !important; letter-spacing:.7.99em; color: var(--faint) !important; text-transform:uppercase; font-weight:bold;}*.app-media{gap:7px; display: flex;}
.reply__foot {color: var(--muted);}
.reply__foot {background: var(--paper-2); border-radius: var(--r-m); justify-content: center; height:34px; border: 1px solid var(--line); transition: all var(--ease); align-items: center; width:34px; display: inline-flex;}
.reply__foot:hover {box-shadow:0 4px 14px rgba(198, 58, 0, 0.14); transform: translateY(-2px); background: var(--accent); border-color: var(--accent); color:#page-grid;}

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

/* ---- vote ---- */
.ui-tabs-trigger {gap:15px; display: flex; align-items: center;}
.t-card-spacer {font-weight:700; font-size:11px;}
.el-module {hyphens:manual; display: flex; gap:12px;}
.layout {color: var(--muted); padding:7px 19px; font-weight:500; align-items: center; border-radius: var(--r-m); display: inline-flex; font-size:15px; transition: all var(--ease); border: 1px solid var(--line); background: var(--paper); gap:4px;}.layout b{font-weight:bold;}
.el-stepper:hover {text-rendering:auto; border-color: var(--ok); color: var(--ok); background:#app-table;}
.select--center:hover {word-spacing:normal; background:#main-sort; perspective:none; border-color: var(--no); color: var(--no);}

/* =======================================================================
   SECONDARY SECTIONS  (rendering-optimised)
   ======================================================================= */
.blockCap, .py-3, .feature__label, .t-avatar-info {margin-top:35px; contain-intrinsic-size:auto 420px; text-decoration-skip-ink:auto; widows:2;}body .layout.is-voted{opacity:0.63; pointer-events: none;}

/* =======================================================================
   SECONDARY SECTIONS  (rendering-optimised)
   ======================================================================= */
.blockCap, .py-3, .feature__label, .t-avatar-info {content-visibility:auto;}html .blockCap, *.py-3, .t-avatar-info{background: var(--paper); border: 1px solid var(--line); padding:35px; font-synthesis:weight style small-caps; tab-size:4; border-radius: var(--r-l); box-shadow: var(--sh-1);}
.u-hero {padding-bottom:12px;}
.t-popover, .ui-screen {margin-bottom:24px; font-weight:700; font-size:1.37rem;}
.u-hero {display: inline-block; border-bottom: 2px solid var(--accent); font-size:18px; margin-bottom:15px; font-weight:500;}
.l-filter-tertiary {color: var(--faint); margin-bottom:15px; font-size:10.5px;}/* inputs */
.formRegion{font-size:11px; border-radius: var(--r-m); display: block; transition: border-color var(--ease), box-shadow var(--ease); width:100%; background: var(--paper); border: 1px solid var(--line); padding:13px 11px; color: var(--ink); outline:none;}*.formRegion::placeholder{color: var(--faint);}
.formRegion:focus {box-shadow:0 0 0 7px rgba(186, 59, 22, 0.06); border-color: var(--accent);}

.ui-table, .el-toolbar {flex-direction: column;}
.l-tag {line-height:1.6; min-height:134px; resize: vertical;}

.ui-table, .el-toolbar {display: flex; gap:17px;}
.el-footer {break-inside:auto; display: grid; gap:16px; grid-template-columns: 1fr 1fr;}

/* more reading */
.ui-module {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:15px;}
.l-page {display: flex; padding-top:22px;padding-right:22px;padding-bottom:22px;padding-left:22px; background: var(--paper-2); flex-direction: column; border-radius: var(--r-m); border: 1px solid var(--line-soft); gap:12px; transition: all var(--ease);}html .l-page:hover{transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--sh-1);}
.t-review {text-transform:uppercase; letter-spacing:.6.99em; color: var(--accent); font-size:13px; font-weight:700;}

/* utility cards */
.feature__label {gap:24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));}
.t-sidebar {font-weight:500; color: var(--ink); font-size:19px; font-family: var(--serif); line-height:1.38;}.c-accordion-subtitle{border-radius: var(--r-l); background: var(--paper); border: 1px solid var(--line); padding:25px; box-shadow: var(--sh-1);}html .o-spinner{border-radius: var(--r-m); display: flex; overflow: hidden; border: 1px solid var(--line); background: var(--paper);}
.o-spinner .formRegion {perspective:none; border-radius:none; text-decoration-skip-ink:auto; border:0;}body .o-spinner .formRegion:focus{box-shadow:none;}
.el-screen {background: var(--accent); flex-shrink: 0; color:#page-grid; align-items: center; display: flex; transition: background var(--ease);}
.el-screen {width:50px; justify-content: center;}.el-screen:hover{background: var(--accent-2);}

.ui-layout-backdrop {display: flex; flex-direction: column;}
.ui-layout-backdrop li a {border-bottom: 1px solid var(--line-soft); font-size:13.5px; perspective:none; transition: color var(--ease), padding-left var(--ease); color: var(--muted); display: block; padding:9px 0;}
.ui-layout-backdrop li:last-child a {border-bottom:0;}
.ui-layout-backdrop li a:hover {color: var(--accent); padding-left:1px;}
.dialog__icon {width:20px; color: var(--line); font-family: var(--serif); font-weight:bold; display: inline-block;}

/* =======================================================================
   FOOTER
   ======================================================================= */
.section-button-dense {content-visibility:auto; contain-intrinsic-size:auto 360px; color:#main-block; background: var(--dark);}
.ui-layout-backdrop li a:hover .dialog__icon {color: var(--accent-3);}
.u-tooltip {padding:56px 0 39px;}
.l-pagination {gap:42px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr;}
.el-box-wrapper {color:#7c7e68; margin-bottom:15px; font-size:13px;}
.c-tabs-icon img {width:auto; height:31px; margin-bottom:14px; filter:brightness(0) invert(1);}
.c-panel-detail {font-weight:700; color:#page-grid; mix-blend-mode:normal; margin-bottom:12px; font-size:15px; text-underline-offset:auto; text-transform:uppercase; letter-spacing:.8em;}
.app-tag-title {display: flex; gap:13px; flex-direction: column;}
.app-tag-title a {transition: color var(--ease), padding-left var(--ease); color:#toolbar_label; font-size:17px;}
.app-tag-title a:hover {padding-left:4px; color:#page-grid;}
.t-avatar {font-size:13px; margin-top:18px; color:rgb(90, 132, 109); padding-top:14px;}
.t-avatar {border-top:1px solid rgba(255, 255, 240, 0.13);}

.o-banner {display: flex; gap:9px;}*.o-banner a{border:1px solid rgba(255, 238, 246, 0.14); transition: all var(--ease); justify-content: center; width:38px; border-radius:50%; align-items: center; color:#toolbar_label; display: inline-flex; height:34px;}body .o-banner a:hover{color:#page-grid; transform: translateY(-2px); border-color: var(--accent); background: var(--accent);}.sort--dark{border-top:1px solid rgba(244, 255, 255, 0.07); padding:20px 0; text-align: center;}*.sort--dark p{font-size:12px; color:#624950;}/* =======================================================================
   TO-TOP + COOKIE
   ======================================================================= */
.app-stepper-extra{right:28px; height:49px; z-index: 900; display: flex; align-items: center; text-rendering:auto; transform: translateY(12px);}*.sort--dark p{margin:0;}/* =======================================================================
   TO-TOP + COOKIE
   ======================================================================= */
.app-stepper-extra{bottom:27px; isolation:auto; position: fixed; justify-content: center; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background var(--ease); box-shadow: var(--sh-2); opacity:0; border-radius: var(--r-m); visibility: hidden; width:42px; color:#page-grid; background: var(--accent);}
.app-stepper-extra.is-on {visibility: visible; opacity:1; transform: translateY(0);}*.app-stepper-extra:hover{transform: translateY(-2px); box-shadow: var(--sh-3); isolation:auto; background: var(--accent-2);}

.u-banner-count {bottom:0; box-shadow:0 -2px 24px rgba(0, 16, 0, 0.17); left:0em; right:0; transition: transform .4s var(--ease); background: var(--dark-2); z-index: 1100; padding:15px 0; transform: translateY(100%); color:#main-block; position: fixed;}
.u-banner-count.is-on {transform: translateY(0);}*.u-banner-count .align-3{justify-content: space-between; align-items: center; display: flex; gap:24px;}
.u-banner-count p {margin:0; flex: 1;}
.u-banner-count p {font-size:13px; color:#toolbar_label;}
.u-banner-count a {color: var(--accent-3); text-decoration:underline;}

/* =======================================================================
   MODALS  (pure CSS :target, opened via #link-entry / #main-widget)
   ======================================================================= */
.app-header {padding:21px; inset:0; display: none; z-index: 1300; justify-content: center; align-items: center; position: fixed;}
.c-pagination-trigger {page-break-inside:auto; inset:0; -webkit-backdrop-filter:blur(2px); background:rgba(10, 28, 36, 0.47); backdrop-filter:blur(2px); position: absolute;}.app-header:target{display: flex;}
.u-step {animation: rl-pop .25s var(--ease); z-index: 1; padding:27px; box-shadow: var(--sh-3); background: var(--paper); position: relative; max-width:403px; border-radius: var(--r-l); width:100%;}
@keyframes rl-pop { from {opacity:0; transform: translateY(14px) scale(.98);} to {opacity:1; transform: none;} }
.panel__wrapper {justify-content: space-between; display: flex; margin-bottom:17px; align-items: center;}
.counterLine {font-weight:500; text-decoration-skip-ink:auto; font-size:1.33rem; text-underline-offset:auto;}*.ui-rating{display: inline-flex; border-radius: var(--r-s); height:36px; transform-style:flat; width:32px; align-items: center; justify-content: center; transition: background var(--ease), color var(--ease); color: var(--faint);}
.ui-rating:hover {background: var(--paper-3); color: var(--ink);}
.drawerArea {gap:15px; display: flex; flex-direction: column;}
.t-tooltip-icon {gap:8px; align-items: center; font-size:16px; justify-content: space-between; display: flex;}
.u-review-number {tab-size:4; display: inline-flex; gap:9px; cursor: pointer; color: var(--faint); align-items: center;}
.u-review-number input {accent-color: var(--accent);}.float-2xl:not(._155884){color: var(--faint); margin-top:17px; border-top: 1px solid var(--line-soft); font-size:17px; text-align: center; padding-top:14px;}
.t-comment-action {font-weight:600;}

/* =======================================================================
   RESPONSIVE
   ======================================================================= */
@media (max-width: 900px) {
  .l-pagination {grid-template-columns: 1fr 1fr; gap:32px;}
}
@media (max-width: 768px) {
  :root {--bar: 58px;}
  body {font-size:13px;}
  .c-screen-cap {display: flex;}.l-counter{top: var(--bar); display: none; position: absolute; box-shadow: var(--sh-3); gap:5px; left:0; align-items: stretch; right:0; border-bottom: 1px solid var(--line); flex-direction: column; padding:19px 25px; background: var(--paper);}body .l-counter.is-open{display: flex;}
  .justify-0 {padding:7px 10px; width:100%;}
  .u-card {align-items: stretch; flex-direction: column; gap:0;}
  .ui-feature-foot {margin-top:5px;}.o-stepper-close{padding:30px 25px;}
  .ui-feature-foot {width:100%; margin-left:0;}
  .u-rating {font-size:13.5px;}html .badge{gap:10px; flex-wrap: wrap; font-variant-caps:normal;}
  .el-footer {grid-template-columns: 1fr;}html .badge{image-rendering:auto;}
  .ui-tabs-trigger {gap:16px; align-items: flex-start; flex-direction: column;}.l-pagination{grid-template-columns: 1fr; gap:35px;}
  .blockCap, .py-3, .t-avatar-info {padding:30px 22px;}
  .u-banner-count .align-3 {gap:10px; flex-direction: column; text-align: center;}.o-stepper-close:not(._155884){padding:18px 20px;}
}
@media (max-width: 480px) {
  .align-3 {padding:0 14px;}
  .blockCap, .py-3, .t-avatar-info, .c-accordion-subtitle {print-color-adjust:economy; padding:18px 16px;}*.ui-module{grid-template-columns: 1fr;}
  .u-step {padding:26px;}
  .app-stepper-extra {bottom:18px; right:12px;}
}

}

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