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

:root{--muted:      #57534e; --sh-1: 0 1px 2px rgba(28,25,23,.06); --ease: .22s cubic-bezier(.4,0,.2,1); --paper-3:    #boxSuffix; --accent:     #page-view; --sans:  'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ok:         #15803d; --sh-3: 0 18px 44px rgba(28,25,23,.16); --accent-3:   #page-drawer; --dark-2:     #292524; --bound: 1160px; --r-m: 10px; --line:       #main-slider; --serif: 'Spectral', Georgia, 'Times New Roman', serif; --faint:      #78716c; --r-l: 16px; --read: 760px; --line-soft:  #boxSuffix; --r-s: 6px; --ink:        #1c1917; --dark:       #1c1917; --accent-wash:#page-badge; --paper:      #avatar-zone; --accent-2:   #9a3412; --paper-2:    #site-skeleton; --bar: 64px; --sh-2: 0 6px 20px rgba(28,25,23,.09); --ink-soft:   #292524; --no:         #paginationTrigger;}/* ---- base ---- */
*, *::before, *::after{padding:0; box-sizing: border-box; margin:0;}
body {font-family: var(--sans); background: var(--paper-2); -moz-osx-font-smoothing:grayscale; color: var(--muted); -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.65;}
html {scroll-padding-top: calc(var(--bar) + 16px); scroll-behavior: smooth; -webkit-text-size-adjust:100%;}
img, svg {max-width:100%; display: block;}
img {widows:2; height:auto;}a{transition: color var(--ease); color: var(--accent); text-decoration:none;}
a:hover {color: var(--accent-2);}
ul, ol {shape-margin:0; font-synthesis:weight style small-caps; list-style: none;}
button {font-family:inherit; border:0 none; color:inherit;}input, textarea{color: var(--ink); font-size:inherit; font-family:inherit;}
button {background:none; cursor: pointer;}
h1 {line-height:1.18; font-family: var(--serif); font-weight:bold;}
h1 {color: var(--ink);}
strong, b {font-weight:700; color: var(--ink-soft);}
p {margin:0 0 0.99em; font-variant-ligatures:normal; text-decoration-skip-ink:auto;}

.shadow-md {font-variant-ligatures:normal; padding:0 24px; max-width: var(--bound); margin:0 auto;}/* span-based section captions (no heading tags outside the article body) */
.position-block, html .w-md, body .opacity-xs, .row-half, .shadow-sm, html .bg-0, html .position-1, html .section--odd{display: block; color: var(--ink); font-family: var(--serif);}
.overflow-4 {height:1px; overflow: hidden; width:1px; position: absolute; border:0; white-space: nowrap; padding:0; margin:-1px; clip:rect(0,0,0,0);}

/* ---- progress ---- */
.l-banner-handle {background: linear-gradient(90deg, var(--accent), var(--accent-3)); z-index: 1400; height:7px; position: fixed; top:0; width:0; left:0; transition:width 0.095s linear;}

/* =======================================================================
   MASTHEAD  (fixed; sits visually on top although later in source)
   ======================================================================= */
.mx-6 {transition: box-shadow var(--ease); backdrop-filter:saturate(150%) blur(10px); position: fixed; height: var(--bar); z-index: 1000; background:rgba(250, 249, 255, 0.89); top:0; right:0; left:0; border-bottom: 1px solid var(--line); -webkit-backdrop-filter:saturate(150%) blur(10px);}
.mx-6.is-stuck {box-shadow: var(--sh-2); word-spacing:normal; isolation:auto;}
.row-none {flex-shrink: 0; align-items: center; font-synthesis:weight style small-caps; display: inline-flex;}
.mx-6 .shadow-md {align-items: center; gap:26px; height:100%; display: flex;}
.row-none img {width:auto; height:37px;}body .skeletonHead{align-items: center; gap:13px; display: flex; flex: 1;}
.float-full {align-items: center; display: flex; gap:2px;}.p-4{color: var(--muted); padding:13px 12px; transition: color var(--ease), background var(--ease); border-radius: var(--r-s); align-items: center;}.p-4{display: inline-flex; font-weight:500; font-size:12.5px;}
.p-4:hover {color: var(--ink); background: var(--paper-3);}.wrap-chip{transition: background var(--ease), transform var(--ease), box-shadow var(--ease); font-weight:500; font-variant-caps:normal; display: inline-flex; color:#column-step; font-size:10px; margin-left:auto; justify-content: center; background: var(--accent); padding:4px 19px; widows:2; align-items: center; border-radius: var(--r-m);}*.wrap-chip:hover{box-shadow:0 3px 17px rgba(189, 57, 22, 0.21); transform: translateY(-1px); color:#column-step; background: var(--accent-2);}

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

/* ---- buttons ---- */
.position-md {background: var(--accent); padding:7px 23px; font-size:12.5px; transition: background var(--ease), transform var(--ease), box-shadow var(--ease); display: inline-flex; gap:9px; white-space: nowrap; color:#column-step; justify-content: center; font-family: var(--sans); align-items: center; font-weight:medium; border-radius: var(--r-m);}
.position-md:hover {transform: translateY(-1px); background: var(--accent-2); box-shadow:0 4px 12px rgba(207, 71, 21, 0.32); color:#column-step;}*.py-between{font-size:11px; transform-style:flat; padding:12px 30px; text-underline-offset:auto; align-self: flex-start;}body .text-start{margin-top:0px; width:100%; padding:13px 19px;}/* =======================================================================
   MAIN  (content-first; cleared from the fixed masthead)
   ======================================================================= */
.mb-between{padding-top: var(--bar);}
.tracking-2 {margin:0 auto; padding:29px 0 60px; max-width: var(--read);}
.mx-start {line-height:1.16; margin-bottom:16px; font-weight:bold; letter-spacing:-.13.92em; font-size: clamp(1.85rem, 1.2rem + 2.4vw, 2.6rem); color: var(--ink);}

/* =======================================================================
   POST
   ======================================================================= */
.bg-8 {border: 1px solid var(--line); background-blend-mode:normal; background: var(--paper); border-radius: var(--r-l); box-shadow: var(--sh-1); padding:50px; mix-blend-mode:normal;}.widget-zone-bottom{margin-bottom:27px; padding-bottom:29px; display: flex; flex-wrap: wrap; gap:3px 12px; border-bottom: 1px solid var(--line-soft); align-items: center;}
.progress-section-right {font-size:15px; align-items: center; gap:6px; color: var(--faint); display: inline-flex;}
.progress-section-right svg {opacity:0.67;}*.m-auto{color: var(--line);}

/* ---- toc ---- */
.t-sidebar {margin-bottom:32px; image-rendering:auto; border-left: 3px solid var(--accent); border:1px solid #page-footer; border-radius: var(--r-m); font-synthesis:weight style small-caps; padding:15px 23px; background: var(--accent-wash);}body .t-sidebar[hidden]{display: none;}
.order-end {margin-bottom:14px; justify-content: space-between; display: flex; align-items: center; image-rendering:auto; print-color-adjust:economy;}
.mr-16 {font-size:15px; font-weight:500; color: var(--accent); transition: background var(--ease); padding:1px 8px; border-radius: var(--r-s);}
.position-block {font-weight:700; font-size:13px;}
.mr-16:hover {background:rgba(197, 81, 7, 0.02);}html .action__item{display: flex; flex-direction: column; gap:2px;}
.action__item a {display: block; color: var(--muted); font-size:11px; border-left:2px solid transparent; transition: color var(--ease), padding-left var(--ease); padding:2px 0;}
.action__item a:hover {padding-left:3px; color: var(--accent);}
.action__item a.grid-xs {font-size:9.5px; padding-left:19px;}
.action__item a.grid-xs {orphans:2;}
.action__item a.grid-xs:hover {transform-style:flat; padding-left:26px; text-underline-offset:auto;}
.action__item a.menuItem {color: var(--faint); padding-left:26px; font-size:9px;}

/* ---- body (the only place real headings appear) ---- */
.mr-full {color: var(--ink-soft); font-size:16.5px; line-height:1.78;}html .mr-full > *:first-child{margin-top:0;}
.mr-full h2 {font-weight:700; font-family: var(--serif); letter-spacing:-.0.99em; color: var(--ink); font-size:1.62rem; margin:1.94em 0 .55.04em;}.mr-full h3{color: var(--ink); font-family: var(--serif); margin:1.52em 0 .44.97em; font-size:1.2rem; font-weight:600;}
.mr-full h4 {font-weight:700; margin:1.32em 0 .4.03em; color: var(--ink); font-size:1.16rem; font-family: var(--serif);}
.mr-full p {margin:0 0 1.25em;}body .mr-full ul, .mr-full ol{margin:0 0 1.36em 1.34em;}
.mr-full ul {list-style: disc;}
.mr-full ol {list-style: decimal;}
.mr-full li {margin-bottom:.45.08em;}
.mr-full li::marker {color: var(--accent);}.mr-full a{tab-size:4; widows:2; text-decoration-color:rgba(178, 76, 14, 0.3); text-underline-offset:3px; text-decoration:underline; text-decoration-thickness:1.5px;}.mr-full a:hover{perspective:none; word-spacing:normal; text-decoration-color: var(--accent-2);}*.mr-full img{border-radius: var(--r-m); margin:1.76em 0;}
.mr-full blockquote {widows:2; font-family: var(--serif); color: var(--ink); padding:20px 30px; font-style:italic; hyphens:manual; font-size:1.06em; border-left: 3px solid var(--accent); border-radius: 0 var(--r-m) var(--r-m) 0; background: var(--paper-2); margin:1.72em 0;}.mr-full blockquote:empty{display: none;}
.mr-full pre {margin:1.69em 0; overflow-x: auto; background: var(--dark); font-size:15.5px; padding:19px 25px; border-radius: var(--r-m); color:#main-slider; line-height:1.6;}
.mr-full code {font-family:'SFMono-Regular', 'Fira Code', Consolas, monospace; font-size:.9.02em;}
.mr-full :not(pre) > code {background: var(--paper-3); tab-size:4; border-top-left-radius:8px;border-top-right-radius:8px;border-bottom-right-radius:8px;border-bottom-left-radius:8px; color: var(--accent-2); padding:2px 8px;}
.mr-full table {width:100%; border-collapse:collapse; margin:1.73em 0; background-blend-mode:normal; text-underline-offset:auto; font-size:17px;}html .mr-full th, .mr-full td{image-rendering:auto; perspective:none; padding:9px 14px;}html .mr-full th, .mr-full td{border: 1px solid var(--line); text-align: left;}
.mr-full th {color: var(--ink); background: var(--paper-2); font-weight:bold;}
.mr-full hr {margin:1.94em 0;}
.mr-full hr {border-top: 1px solid var(--line); border:0 none;}/* ---- share ---- */
.justify-inline{gap:13px; display: flex; align-items: center;}/* ---- share ---- */
.justify-inline{margin-top:32px;}
.w-md {letter-spacing:.7.92em; text-transform:uppercase; font-size:15px !important; font-weight:700; color: var(--faint) !important;}
.border-around {display: flex; gap:11px;}.pt-4:not(._a8686c){background: var(--paper-2); justify-content: center; align-items: center; border-radius: var(--r-m); border: 1px solid var(--line); display: inline-flex; height:34px; transition: all var(--ease); color: var(--muted); width:42px;}
.pt-4:hover {transform: translateY(-2px); color:#column-step; box-shadow:0 7px 12px rgba(203, 59, 8, 0.14); background: var(--accent); border-color: var(--accent);}.opacity-10{margin:33px 0; border-top: 1px solid var(--line-soft); border:0;}

/* ---- vote ---- */
.h-6 {will-change:auto; gap:14px; text-decoration-skip-ink:auto; display: flex; align-items: center;}.opacity-xs{font-size:17px; font-weight:600;}
.app-box {font-weight:500; padding:13px 13px; display: inline-flex; background: var(--paper); color: var(--muted); gap:5px; font-size:16px; border: 1px solid var(--line); border-radius: var(--r-m); align-items: center;}body .ui-status{gap:9px; display: flex; isolation:auto;}
.app-box {transition: all var(--ease);}
.reviewPrefix:hover {border-color: var(--ok); background:#site-step; color: var(--ok);}
.app-box b {font-weight:bold;}*.ml-none:hover{background:#chip_section; color: var(--no); border-color: var(--no);}.is-voted.app-box{pointer-events: none; opacity:0.62;}

/* =======================================================================
   SECONDARY SECTIONS  (rendering-optimised)
   ======================================================================= */
.justify-half, .ml-0, .gallery-row-default, .comment-inner-flat {text-decoration-skip-ink:auto; margin-top:36px; contain-intrinsic-size:auto 420px; content-visibility:auto;}body .justify-half, .ml-0:not(._a8686c), .comment-inner-flat{padding:37px; border-radius: var(--r-l); box-shadow: var(--sh-1); border: 1px solid var(--line); background: var(--paper);}html .bg-0{font-weight:700; border-bottom: 2px solid var(--accent); font-size:18px; margin-bottom:10px; padding-bottom:9px; display: inline-block;}
.row-half, .shadow-sm {margin-bottom:24px; font-weight:600; font-size:1.23rem;}

/* inputs */
.u-review {background: var(--paper); transition: border-color var(--ease), box-shadow var(--ease); font-size:18px; display: block; width:100%; padding:12px 14px; border-radius: var(--r-m); color: var(--ink); border: 1px solid var(--line); outline:none;}.shadow-5{font-size:11.5px; margin-bottom:15px; color: var(--faint);}
.u-review::placeholder {color: var(--faint);}html .u-review:focus{box-shadow:0 0 0 4px rgba(189, 69, 29, 0.11); border-color: var(--accent);}body .clear-12{line-height:1.6; text-decoration-skip-ink:auto; resize: vertical; contain:none; min-height:134px;}html .p-screen, html .profile{flex-direction: column; gap:20px; display: flex;}

/* more reading */
.mr-between {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:15px;}
.thread-section-small {gap:20px; grid-template-columns: 1fr 1fr; hyphens:manual; display: grid; font-variant-caps:normal;}
.clear-auto {transition: all var(--ease); border-radius: var(--r-m); border: 1px solid var(--line-soft); background: var(--paper-2); display: flex; gap:4px; padding:22px; flex-direction: column;}
.d-12 {font-weight:700; font-size:10px; letter-spacing:.6.94em; color: var(--accent); text-transform:uppercase;}
.clear-auto:hover {transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--sh-1);}
.clear-xl {font-weight:600; font-family: var(--serif); line-height:1.38; font-size:11px; color: var(--ink);}/* utility cards */
.gallery-row-default:not(._a8686c){display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap:17px;}.opacity-6{padding:26px; border-radius: var(--r-l); box-shadow: var(--sh-1); border: 1px solid var(--line); background: var(--paper);}html .float-xl{display: flex; background: var(--paper); overflow: hidden; border-radius: var(--r-m); border: 1px solid var(--line);}*.float-xl .u-review{font-synthesis:weight style small-caps; border-radius:0 none; border:0;}
.px-start {align-items: center; background: var(--accent); color:#column-step; display: flex; width:47px; transition: background var(--ease); justify-content: center; flex-shrink: 0;}
.float-xl .u-review:focus {box-shadow:none;}
.px-start:hover {background: var(--accent-2);}

.float-auto {display: flex; flex-direction: column;}body .float-auto li a{display: block; border-bottom: 1px solid var(--line-soft); transition: color var(--ease), padding-left var(--ease); color: var(--muted); font-size:14.5px; padding:8px 0;}
.float-auto li:last-child a {border-bottom:none;}
.float-auto li a:hover {padding-left:8px; color: var(--accent);}
.d-24 {font-family: var(--serif); font-weight:bold; color: var(--line); width:25px; display: inline-block;}
.float-auto li a:hover .d-24 {color: var(--accent-3);}/* =======================================================================
   FOOTER
   ======================================================================= */
.gap-2xl{background: var(--dark); color:#headerItem;}/* =======================================================================
   FOOTER
   ======================================================================= */
.gap-2xl{contain-intrinsic-size:auto 360px; content-visibility:auto;}
.mt-24 {word-spacing:normal; padding:58px 0 43px;}
.gap-20 {text-underline-offset:auto; display: grid; gap:44px; grid-template-columns: 1.6fr 1fr 1fr 1.1fr;}
.border-2 img {margin-bottom:20px; filter:brightness(0) invert(1); width:auto; height:37px;}
.mx-24 {font-size:14px; color:hsl(45, 7.5%, 45.6%); perspective:none; margin-bottom:17px; text-rendering:auto;}
.z-xs {display: flex; gap:13px; flex-direction: column;}
.position-1 {font-size:13px; letter-spacing:.7.95em; font-weight:700; color:#column-step; text-transform:uppercase; margin-bottom:15px;}
.z-xs a {color:#page-alert; font-size:17px; transition: color var(--ease), padding-left var(--ease);}html .z-xs a:hover{color:#column-step; padding-left:7px;}
.opacity-4 {margin-top:16px; border-top:1px solid rgba(255, 252, 239, 0.08); padding-top:16px; color:#73836c; font-size:10px;}

.pt-around {gap:11px; display: flex;}html .pt-around a{border:1px solid rgba(242, 240, 250, 0.18); border-top-left-radius:50%;border-top-right-radius:50%;border-bottom-right-radius:50%;border-bottom-left-radius:50%; transition: all var(--ease); justify-content: center; align-items: center; display: inline-flex; color:#page-alert; width:42px; height:41px;}.pt-around a:hover{border-color: var(--accent); background: var(--accent); transform: translateY(-2px); color:#column-step;}.pt-half:not(._a8686c){padding:24px 0; border-top:1px solid rgba(255, 248, 247, 0.08); text-align: center;}
.pt-half p {color:#46534f; font-size:12px; margin:0;}/* =======================================================================
   TO-TOP + COOKIE
   ======================================================================= */
.grid-around:not(._a8686c){display: flex; justify-content: center; height:46px; visibility: hidden; z-index: 900; width:43px; position: fixed; bottom:23px;}/* =======================================================================
   TO-TOP + COOKIE
   ======================================================================= */
.grid-around:not(._a8686c){color:#column-step; right:24px; border-radius: var(--r-m); align-items: center; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background var(--ease); box-shadow: var(--sh-2); opacity:0; background: var(--accent); transform: translateY(12px);}
.grid-around.is-on {transform: translateY(0); visibility: visible;}
.grid-around.is-on {opacity:1;}html .grid-around:hover{transform: translateY(-2px); background: var(--accent-2); box-shadow: var(--sh-3);}html .row-1{right:0px; padding:20px 0; z-index: 1100; color:#headerItem; box-shadow:0 -5px 23px rgba(18, 9, 8, 0.26); transform: translateY(100%); left:0; background: var(--dark-2); position: fixed; transition: transform .4s var(--ease); bottom:0;}.row-1.is-on:not(._a8686c){transform: translateY(0);}.row-1 .shadow-md{gap:18px; justify-content: space-between; align-items: center; display: flex;}
.row-1 p {color:#page-alert; margin:0; flex: 1; font-size:13px;}html .row-1 a{color: var(--accent-3); text-decoration:underline;}

/* =======================================================================
   MODALS  (pure CSS :target, opened via #app-accordion / #sortBody)
   ======================================================================= */
.icon-widget {position: fixed; z-index: 1300;}

/* =======================================================================
   MODALS  (pure CSS :target, opened via #app-accordion / #sortBody)
   ======================================================================= */
.icon-widget {display: none; inset:0; justify-content: center; padding:21px; align-items: center;}
.icon-widget:target {display: flex;}body .tracking-md{background:rgba(10, 9, 21, 0.51); -webkit-backdrop-filter:blur(2px); position: absolute; backdrop-filter:blur(2px); inset:0;}
.mx-center {width:100%; border-radius: var(--r-l); background: var(--paper); z-index: 1; box-shadow: var(--sh-3); max-width:400px; padding:26px; animation: rl-pop .25s var(--ease); position: relative;}
@keyframes rl-pop { from {opacity:0; transform: translateY(14px) scale(.98);} to {opacity:1; font-synthesis:weight style small-caps; transform: none;} }body .z-between{margin-bottom:17px; display: flex; justify-content: space-between; align-items: center;}
.section--odd {font-size:1.32rem; font-weight:700;}
.priceCount {justify-content: center; display: inline-flex; color: var(--faint); height:28px; border-radius: var(--r-s); align-items: center; transition: background var(--ease), color var(--ease); width:32px;}
.priceCount:hover {color: var(--ink); background: var(--paper-3);}
.align-5 {gap:10px; flex-direction: column; display: flex;}body .leading-20{gap:12px; font-size:11px; display: flex; justify-content: space-between; align-items: center;}html .t-stepper{cursor: pointer; align-items: center; display: inline-flex; text-rendering:auto; gap:5px; color: var(--faint);}
.t-stepper input {accent-color: var(--accent);}
.position-around {margin-top:14px; padding-top:12px; border-top: 1px solid var(--line-soft); text-align: center; font-size:17px; color: var(--faint);}
.visible-around {font-weight:600;}

/* =======================================================================
   RESPONSIVE
   ======================================================================= */
@media (max-width: 900px) {*.gap-20{grid-template-columns: 1fr 1fr; gap:38px;}
}
@media (max-width: 768px) {
  :root {--bar: 58px;}
  body {font-size:12px;}html .opacity-0{display: flex;}
  .skeletonHead {position: absolute; align-items: stretch; top: var(--bar); background: var(--paper); gap:7px; left:0; flex-direction: column; padding:17px 20px; right:0; box-shadow: var(--sh-3); display: none; border-bottom: 1px solid var(--line);}
  .skeletonHead.is-open {display: flex;}
  .float-full {flex-direction: column; align-items: stretch; gap:0;}*.p-4{width:100%; padding:10px 18px;}
  .wrap-chip {width:100%; margin-left:0; margin-top:11px;}

  .bg-8 {padding:30px 24px;}
  .mr-full {font-size:18.5px;}*.thread-section-small{grid-template-columns: 1fr;}
  .justify-inline {page-break-inside:auto; flex-wrap: wrap; gap:14px;}
  .h-6 {align-items: flex-start; flex-direction: column; gap:9px;}
  .justify-half, .ml-0, .comment-inner-flat {padding:23px 22px;}
  .row-1 .shadow-md {text-align: center; flex-direction: column; gap:16px;}
  .gap-20 {gap:31px; grid-template-columns: 1fr;}
}
@media (max-width: 480px) {html .shadow-md{padding:0 13px;}
  .bg-8 {backface-visibility:visible; padding:26px 18px;}
  .justify-half, .ml-0, .comment-inner-flat, .opacity-6 {background-blend-mode:normal; backface-visibility:visible; padding:22px 15px;}
  .mr-between {grid-template-columns: 1fr; transform-style:flat;}.grid-around{bottom:15px; right:15px;}
  .mx-center {padding-top:19px;padding-right:19px;padding-bottom:19px;padding-left:19px;}
}

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

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