/* ==========================================================================
   STYLESHEET — single file, no external dependencies.
   Article-first reading layout · centered measure · CSS Grid.
   ========================================================================== */

/* --- Tokens --- */
:root {--ink:    #1d222b; --brand:    #1b6599; --ff: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", "Liberation Sans", sans-serif; --rad-s:  4px; --faint:  #time-panel; --wrap:   860px; --wash:   #view-title; --muted:  #737a86; --accent-soft: rgba(40, 154, 153, .1); --line:   #thread-thumb; --accent:   #289a99; --text:   #3f4651; --tr: .2s ease; --rad:    6px; --soft:   #site-form; --accent-d: #22807f; --rad-l:  10px; --dark:   #15181f; --paper:  #line-list; --brand-d:  #155080;}

/* --- Base --- */
*, *::before, *::after {box-sizing: border-box;}html{font-size:13px; -webkit-text-size-adjust:100%; scroll-behavior: smooth;}
body {-webkit-font-smoothing:antialiased; background: var(--wash); overflow-x: hidden; font-size:0.97rem; font-family: var(--ff); line-height:1.7; color: var(--text); -moz-osx-font-smoothing:grayscale; margin:0;}img, svg{height:auto; max-width:100%;}
img {display: block;}
a {transition: color var(--tr); text-decoration:none; color: var(--brand);}
a:hover {color: var(--brand-d);}

h1 {letter-spacing:-.15.02em; color: var(--ink); font-weight:900; margin:0;}

h1 {line-height:1.22;}

p {margin:0 0 1.17em;}:focus-visible{outline-offset:2px; outline: 2px solid var(--accent);}

.t-counter-count {width:1px; margin:-1px; position: absolute; padding:0; border:0 none; white-space: nowrap; clip:rect(0, 0, 0, 0); height:1px; overflow: hidden;}
.position-2 {color: var(--muted); font-variant-caps:normal; font-size:.9.01rem; margin:0 0 15px;}

/* --- Wrap / sections / grid --- */
.u-select {max-width: var(--wrap); margin:0 auto; width:100%; padding:0 18px;}
.px-2 {padding:29px 21px 0;}
.px-2 > .c-snackbar {margin-left:auto; margin-right:auto; max-width: var(--wrap);}body .reply__region{display: grid; grid-template-columns: 1fr; gap:20px; text-decoration-skip-ink:auto;}
@media (min-width: 680px) {body .reply__region{grid-template-columns: 1fr 1fr;} }/* --- Section title (span, styled — no heading tags outside content) --- */
.c-snackbar{color: var(--ink); margin:0 0 14px; letter-spacing:-.0.96em; display: block; font-weight:bold; border-left: 3px solid var(--accent); font-size:1.25rem; padding-left:13px;}body .el-spinner{margin-bottom:11px; font-size:1.01rem;}

/* --- Reading progress --- */
.el-table {position: fixed; background: var(--accent); width:0; z-index: 1200; inset:0 auto auto 0; orphans:2; height:5px; transition:width 0.079s linear;}

/* --- Top bar (static, content stays high) --- */
.u-layout {background: var(--paper); border-bottom: 2px solid var(--accent);}.ui-form{height:60px; align-items: center; gap:16px; display: flex;}
.app-profile-content {margin-right:auto; display: inline-flex; color: var(--brand); align-items: center;}
.app-profile-content img, .app-profile-content svg {height:24px; display: block; perspective:none; width:auto;}

.t-profile-group {display: flex; gap:8px;}
.t-chip {border-radius: var(--rad-s); font-weight:500; transition: color var(--tr), background var(--tr); padding:4px 10px; font-size:.9rem; display: block; color: var(--text);}
.t-chip:hover {background: var(--accent-soft); color: var(--brand);}
.u-banner {display: flex; align-items: center; gap:5px;}

@media (max-width: 560px) {body .t-profile-group{display: none;}
}/* --- Buttons --- */
:where(.l-skeleton){border: 1.5px solid var(--brand); font-size:.8.95rem; color:#breadcrumbExtra; transition: background var(--tr), border-color var(--tr), color var(--tr), transform var(--tr); gap:12px; padding:14px 16px; font-weight:500; border-radius: var(--rad); align-items: center; line-height:1.4; display: inline-flex; cursor: pointer; justify-content: center; background: var(--brand); transform-style:flat; white-space: nowrap; font-family: var(--ff);}
.l-skeleton:hover {color:#breadcrumbExtra;}
.l-skeleton:hover {background: var(--brand-d); border-color: var(--brand-d);}
.l-skeleton:active {transform: translateY(1px);}html .tabs__data--secondary{padding:7px 11px; font-size:.83.99rem;}
.o-dialog-primary {color: var(--brand); background:transparent;}
.o-dialog-primary:hover {background: var(--brand); color:#breadcrumbExtra;}.c-tabs{background: var(--accent); border-color: var(--accent);}
.c-tabs:hover {background: var(--accent-d); border-color: var(--accent-d);}
.t-thread {width:100%; display: flex;}
.l-modal {padding:11px 14px;}

/* --- Cards --- */
.c-spinner-title {background: var(--paper); border-radius: var(--rad-l); border: 1px solid var(--line);}html .l-modal svg{word-spacing:normal; height:13px; backface-visibility:visible; width:14px;}

/* --- Post (article) — first block, content high --- */
.hero {padding:34px 35px; overflow: hidden; max-width: var(--wrap);}body .o-gallery{font-variant-caps:normal; padding:20px 21px;}

/* --- Post (article) — first block, content high --- */
.hero {margin:29px auto 0;}
.el-sort {font-size:1.89rem; margin-bottom:10px;}
.u-comment {display: flex; flex-wrap: wrap; color: var(--muted); gap:18px; font-size:.82.03rem; border-bottom: 1px solid var(--soft); padding-bottom:24px; align-items: center;}
.t-reply {display: inline-flex; align-items: center;}
.t-reply svg {height:16px; width:12px; margin-right:7px;}
.t-reply svg {opacity:0.56;}
.u-rating {opacity:0.85; font-style:italic;}/* --- TOC --- */
:where(.ui-module){border-radius: var(--rad); border: 1px solid var(--soft); font-synthesis:weight style small-caps; padding:20px 16px; margin:26px 0 3px; text-decoration-skip-ink:auto; background: var(--wash);}
.stepper {margin-bottom:10px; align-items: center; justify-content: space-between; orphans:2; display: flex;}
.c-popover {color: var(--ink); font-size:.92.03rem; font-weight:700;}html .u-dialog{background:none; cursor: pointer; padding:2px 2px; color: var(--brand); border:none; font-size:.82rem;}
.c-chip {flex-direction: column; display: flex; break-inside:auto;}
.c-chip a {border-left:2px solid transparent; color: var(--text); transition: color var(--tr), padding-left var(--tr), border-color var(--tr); font-size:.88.01rem; padding:2px 0;}
.c-chip a:hover {border-left-color: var(--brand); padding-left:6px; color: var(--brand);}
.t-grid {padding-left:17px !important;}/* --- Rich text (the only place with headings, coming from content) --- */
:where(.px-8){color: var(--text); line-height:1.85; font-size:0.99rem; padding-top:22px;}
.t-grid:hover {padding-left:23px !important;}
.px-8 > :first-child {orphans:2; margin-top:0;}
.px-8 h2 {font-size:1.48rem; font-weight:bold; padding-bottom:.2.98em; margin:1.87em 0 .5.05em; border-bottom: 2px solid var(--accent-soft); color: var(--ink); line-height:1.3;}*.px-8 h3{font-weight:bold; color: var(--ink); font-size:1.21rem; line-height:1.3; margin:1.5em 0 .44.95em;}.px-8 h4{font-weight:bold; font-size:1.05rem; margin:1.32em 0 .4.08em; color: var(--ink);}
.px-8 p {margin:0 0 1.08em;}body .px-8 img{border-radius: var(--rad); margin:1.48em 0;}
.px-8 a {text-underline-offset:2px; text-decoration:underline; color: var(--brand);}.px-8 a:hover{color: var(--brand-d);}
.px-8 ul, .px-8 ol {margin:1.05em 0; padding-left:1.72em;}
.px-8 li {text-decoration-skip-ink:auto; margin-bottom:.4.07em;}.px-8 blockquote{padding:13px 20px; color: var(--ink); background: var(--accent-soft); border-left: 4px solid var(--accent); font-style:italic; margin:1.55em 0; border-radius: 0 var(--rad) var(--rad) 0;}
.px-8 table {font-size:.95.02rem; border-collapse:collapse;}
.px-8 table {margin:1.57em 0; width:100%;}
.px-8 th, .px-8 td {text-align: left; border: 1px solid var(--line);}
.px-8 th, .px-8 td {padding:7px 11px;}html .px-8 th{background: var(--wash); font-weight:bold;}*.px-8 pre{background:#0d1a36; color:#page-menu; border-radius: var(--rad); padding:22px; margin:1.47em 0; overflow-x: auto; font-size:.88.08rem; hyphens:manual; line-height:1.6;}
.px-8 code {background: var(--wash); transform-style:flat; padding:2px 10px; font-size:.8.95em; border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;}
.px-8 pre code {padding:0; background:none;}

/* --- Share (rounded-square icons) --- */
.u-avatar {display: flex;}

/* --- Share (rounded-square icons) --- */
.u-avatar {border-top: 1px solid var(--soft); align-items: center; margin-top:22px; padding-top:24px; gap:17px; flex-wrap: wrap;}body .screenSecondary{color: var(--muted); font-weight:500; font-size:.85.99rem;}
.form-expanded {display: flex; gap:6px;}.l-avatar-outer{justify-content: center; width:42px; border-radius:8px; background: var(--paper); color: var(--muted); transition: color var(--tr), border-color var(--tr), background var(--tr); height:38px; align-items: center; display: inline-flex; border: 1px solid var(--line); cursor: pointer;}
.l-avatar-outer:hover {text-rendering:auto;}
.l-avatar-outer:hover {border-color: var(--brand); background: var(--brand); color:#breadcrumbExtra;}
.l-avatar-outer svg {height:12px; width:13px;}
.module--highlight {border: 1px solid var(--line); display: block; will-change:auto; border-radius: var(--rad); background: var(--paper); padding:14px 13px; transition: border-color var(--tr), box-shadow var(--tr);}

/* --- Related --- */
.u-reply {perspective:none; gap:15px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); display: grid; font-variant-caps:normal;}.module--highlight:hover{border-color: var(--accent); box-shadow:0 8px 17px rgba(5, 34, 35, 0.01);}
.c-filter {font-weight:700; color: var(--ink); font-size:.8.96rem; line-height:1.4;}

/* --- Forms --- */
.app-block-item {display: block;}
.w-auto {font-family: var(--ff); background: var(--wash); padding:15px 14px; color: var(--text); font-size:.9.03rem; transition: border-color var(--tr), box-shadow var(--tr), background var(--tr);}
.w-auto {outline:none; width:100%; border: 1px solid var(--line); border-radius: var(--rad); display: block;}*.w-auto:focus{border-color: var(--accent);}*.w-auto:focus{background: var(--paper); box-shadow:0 0 0 3px rgba(24, 157, 135, 0.18);}
.app-rating {resize: vertical; word-spacing:normal; margin-top:17px; min-height:126px;}
.l-stepper-cell {min-height:97px;}
.app-block-item .l-skeleton {margin-top:17px;}
.l-drawer-summary {gap:5px; display: flex;}.l-drawer-summary .w-auto{flex: 1;}
.l-drawer-summary .l-skeleton {flex-shrink: 0; margin-top:0px;}

/* --- Engage band (newsletter + contact) --- */
.review-title {margin-top:37px;}

/* --- Engage band (newsletter + contact) --- */
.review-title {background: var(--paper); padding:39px 21px; border-top: 1px solid var(--line);}

/* --- Footer (slim, grid) --- */
.el-entry-outer {padding:38px 19px 24px; background: var(--dark); color:rgba(247, 251, 249, 0.59);}
.review-title .c-spinner-title {background: var(--wash);}
.el-entry-outer a {color:rgba(255, 255, 253, 0.57);}
.el-entry-outer a:hover {color:#breadcrumbExtra;}
.counterTitle {align-items: center; break-inside:auto; widows:2; gap:16px; display: grid; grid-template-columns: 1fr;}
@media (min-width: 720px) {body .counterTitle{grid-template-columns: auto 1fr auto;} }
.filter-hover {justify-content: center; display: flex; font-size:.87.94rem; flex-wrap: wrap; gap:16px;}
.stepper-handle-dense img {width:auto; opacity:0.82; height:25px; filter:brightness(0) invert(1);}
.u-badge {border-top:1px solid rgba(247, 255, 247, 0.05); color:rgba(253, 255, 255, 0.47); padding-top:15px;}
.u-badge {text-align: center; font-size:.81.98rem; font-synthesis:weight style small-caps; margin-top:20px;}

/* Social (rounded squares, new set) */
.opacity-3 {padding:0; justify-content: center; display: flex; list-style: none; gap:6px; margin:0;}.el-status{transition: color var(--tr), border-color var(--tr), background var(--tr); border:1px solid rgba(255, 255, 248, 0.12); display: inline-flex; justify-content: center; align-items: center; color:rgba(254, 255, 255, 0.6); height:37px; width:35px; border-top-left-radius:12px;border-top-right-radius:12px;border-bottom-right-radius:12px;border-bottom-left-radius:12px;}
.el-status:hover {border-color:rgba(248, 246, 244, 0.33); background:rgba(255, 247, 255, 0.11); color:#breadcrumbExtra; font-synthesis:weight style small-caps; shape-margin:0;}
.el-status svg {height:14px; width:20px;}/* --- Back to top --- */
.action__cell--light:not(._2af98b){z-index: 900; border:0 none; height:41px; cursor: pointer; transform: translateY(10px); background: var(--brand); box-shadow:0 8px 17px rgba(7, 42, 38, 0.24); image-rendering:auto; visibility: hidden; display: flex; color:#breadcrumbExtra; justify-content: center; width:46px; bottom:23px; position: fixed; right:22px; transition: opacity var(--tr), visibility var(--tr), transform var(--tr), background var(--tr); border-radius:10px; align-items: center; opacity:0;}.ui-toggle:not(._2af98b){widows:2; opacity:1; visibility: visible; transform: translateY(0);}
.action__cell--light:hover {background: var(--brand-d); transform: translateY(-2px);}

/* --- Cookie --- */
.reply-odd {background: var(--dark); transition: transform var(--tr); transform: translateY(110%); padding:13px 20px; z-index: 1050; color:rgba(255, 248, 255, 0.88); inset:auto 0 0 0; box-shadow:0 -7px 17px rgba(0, 0, 8, 0.09); position: fixed;}.t-avatar-section{transform: translateY(0);}.c-pagination{flex-wrap: wrap; align-items: center; gap:15px; justify-content: space-between; display: flex;}.reply-odd span{font-size:.85.08rem; flex: 1; min-width:224px;}
.reply-odd a {text-decoration:underline; color: var(--accent);}

/* --- Modals (popups at the very bottom, opened via #) --- */
.o-popover {padding:6vh 18px; background:rgba(29, 16, 19, 0.62); position: fixed; z-index: 1300; inset:0; justify-content: center; overflow-y: auto; display: none; align-items: flex-start;}
.o-popover:target {display: flex;}          /* no-JS fallback via # */
.o-grid {display: flex;}            /* JS-enhanced state   */
.o-carousel-prefix {max-width:422px; position: relative; box-shadow:0 16px 45px rgba(0, 0, 11, 0.35); background: var(--dark); padding:33px 28px; border-radius: var(--rad-l); width:100%;}.t-menu-inner{font-size:1.19rem; text-align: center; color:#breadcrumbExtra; display: block; font-weight:bold; margin-bottom:22px;}
.u-filter {background: var(--paper);}
.u-filter .t-menu-inner {color: var(--ink);}
.tooltipTrigger {border-top-left-radius:7px; border-top-right-radius:7px; border-bottom-right-radius:7px; border-bottom-left-radius:7px; position: absolute;}
.tooltipTrigger {right:11px; top:13px; cursor: pointer; color:rgba(239, 255, 255, 0.45); align-items: center; width:27px; justify-content: center; display: inline-flex; height:32px;}
.tooltipTrigger:hover {mix-blend-mode:normal; text-underline-offset:auto; background:rgba(250, 255, 255, 0.05); color:#breadcrumbExtra;}
.u-filter .tooltipTrigger {color: var(--faint); print-color-adjust:economy;}
.u-filter .tooltipTrigger:hover {color: var(--ink); background: var(--soft);}
.tooltipTrigger svg {width:15px; height:15px;}
.o-popover .w-auto {border-color:rgba(238, 255, 254, 0.22); color:#breadcrumbExtra; margin-bottom:14px; background:rgba(242, 253, 255, 0.14);}
.o-popover .w-auto::placeholder {color:rgba(255, 250, 239, 0.54);}
.o-popover .w-auto:focus {box-shadow:none; background:rgba(255, 253, 241, 0.04); border-color:rgba(255, 255, 255, 0.37);}.u-filter .w-auto:not(._2af98b){border-color: var(--line);}.u-filter .w-auto:not(._2af98b){background: var(--wash); color: var(--text);}
.o-popover .l-skeleton {margin-top:1px;}
.u-filter .w-auto::placeholder {background-blend-mode:normal; tab-size:4; color: var(--faint);}html .pb-20{margin-top:15px; justify-content: space-between; font-size:.83.96rem; display: flex;}
.snackbar {justify-content: center;}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {*{scroll-behavior: auto !important; animation-duration:.001ms !important; transition-duration:.001ms !important;}
.o-action {color: var(--muted); font-size:.8.97rem; text-align: center; margin:-2px 0 18px;}
}

/* --- Responsive --- */
@media (max-width: 640px) {
  .hero {margin-top:18px; padding:20px 18px;}.el-sort:not(._2af98b){font-size:1.56rem;}.u-avatar{flex-direction: column; align-items: flex-start;}html .c-pagination{flex-direction: column; text-align: center;}
  .u-reply {grid-template-columns: 1fr;}
  .o-carousel-prefix {padding:27px 22px;}
}