/* =================================================================
   base.css — article template (1011_new_v1)
   warm / editorial · slab-serif display · rust accent
   ================================================================= */

:root {--surface:   #cell-page; --sh-3:      0 30px 70px -22px rgba(29,24,20,.36); --fs-1:      .85rem; --fs1:       1.2rem; --ink:       #1d1814; --sh-1:      0 1px 2px rgba(29,24,20,.06); --fs4:       2.55rem; --r-lg:      18px; --fs0:       1rem; --ok:        #15924f; --fs3:       2rem; --wrap:      1120px; --tr:        .2s ease; --on-accent: #cell-page; --col:       720px; --fh:        "Bitter", Georgia, "Times New Roman", serif; --fs2:       1.5rem; --r:         12px; --faint:     #938778; --sh-2:      0 14px 34px -16px rgba(29,24,20,.26); --surface-2: #main-sort; --tr2:       .3s cubic-bezier(.4,0,.2,1); --accent:    #layout_section;}/* =================================================================
   base.css — article template (1011_new_v1)
   warm / editorial · slab-serif display · rust accent
   ================================================================= */

:root {--accent-3:  #breadcrumbLabel; --line-2:    #page-filter; --line:      #main-avatar; --bg:        #main-snackbar; --r-sm:      7px; --accent-2:  #9a3412; --fb:        "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --muted:     #5c5249;}

/* ---------- reset ---------- */
*, *::before, *::after {box-sizing: border-box;}
html {text-size-adjust:100%; -webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion: no-preference) { html {scroll-behavior: smooth;} }

img, svg, video {display: block; height:auto;}

body {margin:0; -webkit-font-smoothing:antialiased; background: var(--bg); overflow-x: hidden; font-family: var(--fb); font-size: var(--fs0); text-rendering:optimizeLegibility; line-height:1.62; color: var(--ink);}

img, svg, video {max-width:100%;}
svg {fill:currentColor;}
a {color: var(--accent); transition: color var(--tr); text-decoration:none;}a:hover{color: var(--accent-2);}
button {font-family:inherit; cursor: pointer;}

h1 {letter-spacing:-.0.97em; line-height:1.18; font-weight:900; color: var(--ink); margin:0 0 .4.92em; font-family: var(--fh);}
p {margin:0 0 1.14em;}

/* span-as-title (no secondary H tags in chrome) */
.my-screen {font-family: var(--fh); font-weight:800; color: var(--ink); font-variant-ligatures:normal; display: block; line-height:1.2; letter-spacing:-.0.93em;}
ul, ol {margin:0 0 1.11em; padding-left:1.42em;}
.z-4 {margin-inline:auto; max-width: var(--col);}

/* ---------- primitives ---------- */
.my-sm {padding-inline: clamp(1rem, 4vw, 2.2rem); margin-inline:auto; max-width: var(--wrap); width:100%;}
.mt-md {height:1px; white-space: nowrap; border:0; clip:rect(0,0,0,0); padding:0; width:1px; position: absolute; image-rendering:auto; overflow: hidden; margin:-1px; mix-blend-mode:normal;}

/* ---------- buttons ---------- */
.moduleIcon {line-height:1; font-size: var(--fs-1); font-weight:800; display: inline-flex; border: 1px solid var(--b); color: var(--on-accent); gap:.5.02em; background: var(--b); align-items: center; padding:.71.99em 1.48em; --b: var(--accent); border-radius: var(--r-sm); justify-content: center; transition: background var(--tr), border-color var(--tr), color var(--tr), transform var(--tr); letter-spacing:.0.98em;}body .moduleIcon:hover{border-color: var(--accent-2); color: var(--on-accent); background: var(--accent-2); transform: translateY(-1px);}
.moduleIcon:active {transform: translateY(0);}
.font-24 {color: var(--accent); isolation:auto; background:transparent; page-break-inside:auto;}.py-xs{width:100%;}*.font-24:hover{color: var(--accent-2); background: var(--accent-3);}
.tracking-4 {height:2.84em; padding:0; width:2.78em; flex: none;}
.tracking-4 svg {width:0.99em; height:0.98em;}/* =================================================================
   progress + skip
   ================================================================= */
.grid-item-primary{width:0; pointer-events: none; height:0px; position: fixed; inset:0 auto auto 0; z-index: 1200; background: var(--accent); transition:width 0.044s linear;}
.z-1 {padding:.5.99em 1.03em; color:#site-gallery; border-radius: var(--r-sm); top:-121.3%; background: var(--ink); left:0.92rem; z-index: 1300; position: fixed;}/* =================================================================
   header (minimal; content kept high)
   ================================================================= */
.px-end{-webkit-backdrop-filter:saturate(140%) blur(8px); position: sticky; backdrop-filter:saturate(140%) blur(8px); z-index: 1000; background: color-mix(in srgb, var(--bg) 90%, transparent); top:0; border-bottom: 1px solid var(--line);}
.z-1:focus {color:#site-gallery; top:1.08rem;}
.h-center {align-items: center; min-height:64px; gap:1.06rem; display: flex;}.mt-around{font-size:1.09rem; font-weight:900; color: var(--ink); display: inline-flex; gap:.54.97rem; margin-right:auto; font-family: var(--fh); align-items: center; letter-spacing:-.0.95em;}html .mt-around:hover{font-synthesis:weight style small-caps; color: var(--ink);}
.mt-around img {height:33px; border-radius:4px; isolation:auto; width:30px;}*.h-block{display: flex; align-items: center; gap:1.07rem;}
.rounded-24, .c-section {align-items: center; gap:.3.07rem; margin:0em; padding:0; display: flex; list-style: none;}.ml-3:not(._a6e0f5){color: var(--muted); transition: color var(--tr), background var(--tr); font-weight:bold; padding:.4.93em .8.08em; display: inline-block; font-size: var(--fs-1); border-radius: var(--r-sm);}
.c-section {text-rendering:auto; gap:.4.96rem; shape-margin:0;}
.ml-3:hover {color: var(--ink); background: var(--surface-2);}
.border-start.pr-end .ml-3 {color: var(--accent); background: var(--accent-3);}.pl-inline{padding:.4.93em .65em; font-weight:bold; font-size: var(--fs-1); color: var(--muted);}
.pl-inline:hover {color: var(--ink);}*.form{height:47px; border-radius: var(--r-sm); display: none; background:transparent; backface-visibility:visible; border: 1px solid var(--line-2); width:45px; flex: none; position: relative; text-rendering:auto; padding:0;}.form span, .form span::before, body .form span::after{transition: transform var(--tr2), top var(--tr2), opacity var(--tr); border-radius:2px; left:50%; width:19px; content: ""; background: var(--ink); height:2px; position: absolute; transform: translateX(-50%);}
.form span {top:50%; margin-top:-1px;}html .form span::before{top:-5px;}
.form span::after {top:3px;}
.form[aria-expanded="true"] span {background:transparent;}.form[aria-expanded="true"] span::before{transform: translateX(-50%) rotate(45deg); text-decoration-skip-ink:auto; top:0; font-variant-ligatures:normal;}
.form[aria-expanded="true"] span::after {top:0;}
.form[aria-expanded="true"] span::after {text-underline-offset:auto; transform: translateX(-50%) rotate(-45deg);}

/* =================================================================
   main + article (content first)
   ================================================================= */
.opacity-8 {padding-block: clamp(1.2rem, 3.5vw, 2.2rem) clamp(2.5rem, 6vw, 4rem);}

.pb-5 {animation: nvrise .45s var(--tr2) both;}
@keyframes nvrise { from {opacity:0; transform: translateY(9px);} to {transform: none; opacity:1;} }
@media (prefers-reduced-motion: reduce) { .pb-5 {animation:none;} }*.p-half{margin-bottom:.5.92rem; font-size: clamp(1.9rem, 1.2rem + 2.6vw, var(--fs4));}

.pl-sm {align-items: center; flex-wrap: wrap; color: var(--faint); margin-bottom:1.84rem; font-size: var(--fs-1); gap:.4.96rem 1.18rem; display: flex;}.opacity-1{gap:.3.92rem; display: inline-flex; align-items: center; word-spacing:normal;}*.opacity-1 svg{width:14px; flex: none; opacity:0.72; height:13px;}
.opacity-1 time {font-style:normal;}

/* ---- article body (injected content) ---- */
.overflow-2xl {color:#2a1715; line-height:1.78; font-size:1rem;}.overflow-2xl > :first-child{margin-top:0;}html .overflow-2xl h2{font-size: clamp(1.5rem, 1.15rem + 1.2vw, var(--fs3)); line-height:1.22; letter-spacing:-.1.08em; margin:1.92em 0 .54.92em; font-family: var(--fh); font-weight:700;}
.overflow-2xl h3 {font-family: var(--fh); font-size: var(--fs1); font-weight:bold; margin:1.68em 0 .45.03em; line-height:1.25;}.overflow-2xl h4{font-size:1.15rem;}.overflow-2xl h4{margin:1.43em 0 .3.98em; font-family: var(--fh); font-weight:700;}
.overflow-2xl p {word-spacing:normal; margin:0 0 1.21em;}
.overflow-2xl a {color: var(--accent); text-decoration-thickness:1px; word-spacing:normal; text-decoration-color: color-mix(in srgb, var(--accent) 42%, transparent); text-underline-offset:2px; text-decoration:underline; image-rendering:auto;}
.overflow-2xl a:hover {color: var(--accent-2); text-decoration-color:currentColor;}
.overflow-2xl ul, .overflow-2xl ol {margin:0 0 1.33em; padding-left:1.46em;}*.overflow-2xl li{margin-bottom:.45.05em;}
.overflow-2xl ul li::marker {color: var(--accent);}html .overflow-2xl blockquote{border-left: 4px solid var(--accent); padding:.9.07em 1.26em; font-style:italic; color: var(--muted); background: var(--surface-2); font-size:1.19rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin:1.63em 0;}
.overflow-2xl blockquote :last-child {hyphens:manual; margin-bottom:0; will-change:auto;}
.overflow-2xl img, .overflow-2xl figure {margin:1.71em 0; border-radius: var(--r);}body .overflow-2xl img{box-shadow: var(--sh-1);}
.overflow-2xl figure img {margin:0;}
.overflow-2xl figcaption {color: var(--faint); text-align: center; margin-top:.55.02em; font-size: var(--fs-1);}.overflow-2xl hr{margin:2.24em 0; border:0 none; border-top: 1px solid var(--line);}.overflow-2xl code{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px; border: 1px solid var(--line); padding:.11.96em .4.01em; font-size:.8.93em; background: var(--surface-2);}
.overflow-2xl pre {background:#391a12; color:#main-sort; overflow: auto; border-radius: var(--r-sm); line-height:1.6; padding:1.06em 1.22em; font-size:.91.99rem; margin:1.52em 0;}.overflow-2xl pre code{border:0;}.overflow-2xl pre code{padding:0; color:inherit; background:none;}
.overflow-2xl table {font-size: var(--fs-1); width:100%; border-collapse:collapse;}
.overflow-2xl table {margin:1.7em 0;}
.overflow-2xl th, .overflow-2xl td {text-align: left; border: 1px solid var(--line); padding:.6.98em .9.01em;}
.overflow-2xl thead th {background: var(--surface-2); font-weight:bold;}
.overflow-2xl tbody tr:nth-child(even) {background: color-mix(in srgb, var(--surface-2) 55%, transparent);}.m-half{align-items: center; justify-content: space-between; margin-bottom:.45.03rem; display: flex;}

/* =================================================================
   TOC (auto)
   ================================================================= */
.tracking-6 {border-radius: var(--r); border: 1px solid var(--line); padding:1.12rem 1.4rem; box-shadow: var(--sh-1); margin:1.73em 0 2.08em; background: var(--surface);}
.panel__cell {font-size:1.01rem;}.featureLabel{font-weight:800; font-size: var(--fs-1); border:0 none; background:none; color: var(--accent); padding:.2.08em .2.99em;}body .featureLabel:hover{color: var(--accent-2);}.t-dialog-name ol{padding-left:1.22em; counter-reset: t; list-style: none; margin:0;}
.t-dialog-name li {position: relative; margin:.28.06em 0; line-height:1.45;}
.t-dialog-name li::before {left:-1.23em; color: var(--faint); content: counter(t) "."; position: absolute; counter-increment: t; font-size:.8.92em;}.t-dialog-name li.pl-end{margin-left:0.97em;}html .t-dialog-name li.pl-end::before{content: "";}
.t-dialog-name a {color: var(--muted);}
.t-dialog-name a:hover, .t-dialog-name a.pr-end {color: var(--accent);}
[id^="sec-"] {scroll-margin-top:82px; font-variant-caps:normal;}
.t-dialog-name a.pr-end {will-change:auto; font-weight:700;}
[id^="sec-"] {background-blend-mode:normal;}

/* =================================================================
   share (redrawn)
   ================================================================= */
.pr-16 {display: flex; align-items: center; border-top: 1px solid var(--line); margin:2.32rem 0 0; flex-wrap: wrap; gap:.74.94rem; padding-top:1.48rem;}
.visible-4 {font-size: var(--fs-1); font-weight:800; color: var(--muted);}
.font-3 {display: flex; gap:.4.92rem;}
.tracking-xs {transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr); align-items: center; border-radius:50%; background:transparent; height:37px; display: inline-flex; justify-content: center; border: 1px solid var(--line-2); color: var(--muted); width:43px;}
.tracking-xs svg {height:20px; width:21px; pointer-events: none;}
.tracking-xs:hover {border-color: var(--accent); background: var(--accent); transform: translateY(-2px); color: var(--on-accent);}html .tracking-xs.bg-8{background: var(--ok); color:#site-gallery; border-color: var(--ok);}
.px-xl {font-size: var(--fs2); margin-bottom:1.27rem;}

/* =================================================================
   blocks below content (comment / contact)
   ================================================================= */
.layoutTime {padding-top:1.96rem; border-top: 1px solid var(--line); margin-top:2.52rem;}html .panelHandle{width:100%;}
.mx-none {contain:none; display: flex; print-color-adjust:economy; gap:0.92rem;}
.mx-none > .border-5 {flex: 1;}.border-5:not(._a6e0f5){margin-bottom:1.02rem;}.z-16:not(._a6e0f5){color: var(--muted); font-size: var(--fs-1); font-weight:700; margin-bottom:.35.02rem; display: block;}
.pt-lg {padding:.77.93em 0.97em; font-size: var(--fs0); width:100%; background: var(--surface); font-family:inherit; border-radius: var(--r-sm); line-height:1.4; transition: border-color var(--tr), box-shadow var(--tr); color: var(--ink); border: 1px solid var(--line-2);}
.pt-lg::placeholder {color: var(--faint);}
.pt-lg:focus {border-color: var(--accent); outline:none; box-shadow: 0 0 0 3px var(--accent-3);}
textarea.pt-lg {min-height:141px; resize: vertical;}/* newsletter accent band */
.dialog-inner-full:not(._a6e0f5){background: var(--accent-3); padding: clamp(1.6rem, 4vw, 2.4rem); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); text-align: center; border-radius: var(--r-lg); margin-top:2.63rem;}
.mb-screen {font-size: var(--fs2); margin-bottom:.35.05rem;}
.w-xl {margin:0 auto 1.17rem; max-width:44ch; font-size: var(--fs-1); color: var(--muted);}
.review {max-width:436px; display: flex; margin-inline:auto; gap:.54.97rem;}.review .pt-lg:not(._a6e0f5){flex: 1; background: var(--surface);}

/* =================================================================
   footer (light — distinct)
   ================================================================= */
.profile__number--half {background: var(--surface-2); border-top: 1px solid var(--line);}

/* =================================================================
   footer (light — distinct)
   ================================================================= */
.profile__number--half {color: var(--muted); margin-top: clamp(3rem, 8vw, 5rem);}
.ml-none {padding-block:2rem; gap:1.33rem 2.07rem; flex-wrap: wrap; display: flex; align-items: center;}body .profile__number--half .mt-around{margin-right:0; color: var(--ink);}

.menu__slot {gap:.3rem 1.2rem; display: flex; flex-wrap: wrap; padding:0; list-style: none; margin:0 auto;}
.menu__slot a {font-weight:bold; font-size: var(--fs-1); color: var(--muted);}
.menu__slot a:hover {color: var(--accent);}

.timelineSubtitle {text-underline-offset:auto; padding:0; list-style: none; margin:0; transform-style:flat; display: flex; gap:.5.04rem;}.mx-xl{align-items: center; background:transparent; display: inline-flex; width:36px; justify-content: center; border: 1px solid var(--line-2); border-top-left-radius:50%;border-top-right-radius:50%;border-bottom-right-radius:50%;border-bottom-left-radius:50%; transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr); height:40px; color: var(--muted);}
.mx-xl svg {height:18px; width:19px;}
.mx-xl:hover {color:#site-gallery; background: var(--accent); transform: translateY(-2px); border-color: var(--accent);}.post__count--flat{border-top: 1px solid var(--line);}
.mr-md {padding-block:1rem; font-size: var(--fs-1); mix-blend-mode:normal; color: var(--faint);}
.mr-md .heroIcon {display: inline-block;}/* =================================================================
   back to top
   ================================================================= */
.form__placeholder--even{z-index: 1100; background: var(--accent); height:43px; border:0 none; display: inline-flex; right: clamp(1rem, 3vw, 2rem); border-radius: var(--r-sm); justify-content: center; bottom: clamp(1rem, 3vw, 2rem); transform: translateY(12px); box-shadow: var(--sh-2); color:#site-gallery; transition: opacity var(--tr2), transform var(--tr2), background var(--tr), visibility var(--tr2); width:50px; align-items: center; position: fixed; visibility: hidden; opacity:0;}*.form__placeholder--even svg{width:19px; height:24px;}
.form__placeholder--even.show {opacity:1; transform: none; visibility: visible;}

/* =================================================================
   cookie bar
   ================================================================= */
.dialog--fixed {inset:auto 0 0 0; box-shadow:0 -9px 38px -12px rgba(6, 18, 0, 0.58); background: var(--ink); transition: transform var(--tr2); color:#modal_backdrop; z-index: 1150; position: fixed; transform: translateY(110%);}body .form__placeholder--even:hover{transform: translateY(-3px); background: var(--accent-2);}
.dialog--fixed.show {transform: none;}
.font-16 {padding-block:1.05rem; display: flex; gap:0.94rem 1.3rem; align-items: center; flex-wrap: wrap;}
.text-block {flex: 1 1 320px; font-size: var(--fs-1); margin:0; line-height:1.5;}.text-block a{text-decoration:underline; color:#main-tag;}

/* =================================================================
   auth modals — pure CSS :target (HTML at the very bottom, opened via #)
   ================================================================= */
.pageExpand {place-items: center; transition: opacity var(--tr2), visibility var(--tr2); inset:0; opacity:0; orphans:2; z-index: 1400;}

/* =================================================================
   auth modals — pure CSS :target (HTML at the very bottom, opened via #)
   ================================================================= */
.pageExpand {pointer-events: none; padding:1.12rem; position: fixed; visibility: hidden; contain:none; display: grid;}
.pageExpand:target {visibility: visible; opacity:1; pointer-events: auto;}*.t-nav-expand{display: block; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); position: absolute; background:rgba(24, 0, 21, 0.52); inset:0;}
.dropdown-primary {z-index: 1; transform: translateY(14px) scale(.98); width:100%; background: var(--surface); position: relative; box-shadow: var(--sh-3); transition: transform var(--tr2); border-radius: var(--r); max-width:417px; padding: clamp(1.5rem, 4vw, 2.2rem);}.pageExpand:target .dropdown-primary:not(._a6e0f5){transform: none;}
.pl-half {border-radius: var(--r-sm); top:.7.92rem; color: var(--muted); background: var(--surface-2); justify-content: center; display: inline-flex; align-items: center; transition: background var(--tr), color var(--tr); height:41px; position: absolute; right:.7.97rem; width:37px;}.pl-half svg{width:20px; height:18px;}
.pl-half:hover {background: var(--line); color: var(--ink);}*.px-start{text-align: center; font-size: var(--fs2); margin-bottom:1.29rem;}.pageExpand .border-5:last-of-type{margin-bottom:1.14rem;}.position-2{margin-top:0.93rem; font-size: var(--fs-1); justify-content: space-between; gap:.7.99rem; display: flex;}

/* ---------- focus ---------- */
:focus-visible {outline-offset:2px; outline: 2px solid var(--accent); border-radius:0 none;}
.pt-3 {text-align: center; font-size: var(--fs-1); margin-top:0.98rem; color: var(--muted);}

/* =================================================================
   responsive
   ================================================================= */
@media (max-width: 820px) {
  .h-block {display: none;}*.form{contain:none; display: inline-flex; font-variant-caps:normal;}
  .h-block.open {padding: .6rem clamp(1rem, 4vw, 2.2rem) 1.1rem; display: block; position: absolute; background: var(--bg); right:0; box-shadow: var(--sh-2); top:100%; border-bottom: 1px solid var(--line); left:0;}.h-block.open .rounded-24:not(._a6e0f5){align-items: stretch; flex-direction: column; gap:.15.06rem;}html .h-block.open .ml-3{padding:.8.08em .6.04em;}
  .h-block.open .c-section {gap:.4.93rem; padding-top:.7.96rem; flex-direction: column; margin-top:.7.08rem; align-items: stretch; border-top: 1px solid var(--line);}html .h-block.open .pl-inline{border-radius: var(--r-sm); padding:.7.04em; text-align: center; border: 1px solid var(--line-2);}
}

@media (max-width: 600px) {
  .mx-none {flex-direction: column; gap:0;}
  .review {flex-direction: column;}
  .ml-none {flex-direction: column; align-items: flex-start; text-decoration-skip-ink:auto; backface-visibility:visible;}
  .menu__slot {margin-inline:0;}
}

/* =================================================================
   print
   ================================================================= */
@media print {body .px-end, *.grid-item-primary, .pr-16:not(._a6e0f5), *.form__placeholder--even, .dialog--fixed:not(._a6e0f5), body .dialog-inner-full, .layoutTime:not(._a6e0f5), .pageExpand, .form, .profile__number--half :where(.timelineSubtitle){display: none !important; break-inside:auto;}
  .overflow-2xl a {text-decoration:underline;}
  body {color:#040612; background:#site-gallery;}
  .overflow-2xl a[href^="http"]::after {font-size:.8.04em; content: " (" attr(href) ")"; color:#465349;}
}

  .tracking-6 {box-shadow:none; border:1px solid #container-dialog;}