@import url('./soft-editorial.css');
@import url('./article-card.css');
body.article main{position:relative}
.article-weather{--glass-tint:rgba(255,253,248,.74);--glass-glow:rgba(255,255,255,.7);position:fixed;z-index:4;top:104px;right:max(4.5vw,32px);box-sizing:border-box;width:244px;padding:15px 16px 13px;border:1px solid rgba(255,255,255,.72);border-radius:20px;background:transparent;box-shadow:0 12px 32px rgba(52,35,42,.12),0 2px 5px rgba(52,35,42,.06),inset 0 0 0 1px rgba(100,78,88,.12);color:#181412;font:400 12.5px/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI','Nunito Sans',sans-serif}
/* Only the backdrop is refracted; text, weather icons and credit links stay sharp. */
.article-weather::before,.article-weather::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.article-weather::before{z-index:-1;background:var(--glass-tint);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.article-weather::after{background:radial-gradient(ellipse at var(--glass-x,18%) var(--glass-y,0%),var(--glass-glow),transparent 62%);box-shadow:inset 1px 1px 1px rgba(255,255,255,.85),inset -1px -1px 1px rgba(255,255,255,.32),inset 0 -5px 10px rgba(254,170,206,.08);opacity:.5}
.article-weather[data-glass=refraction]{--glass-tint:rgba(255,253,248,.2);box-shadow:0 14px 34px rgba(52,35,42,.16),0 2px 5px rgba(52,35,42,.08),inset 0 0 0 1px rgba(100,78,88,.16)}
.article-weather[data-glass=refraction]::before{background:linear-gradient(180deg,transparent,rgba(255,253,248,.48) 23%,rgba(255,253,248,.48) 80%,transparent),var(--glass-tint);backdrop-filter:url(#uf-weather-lens) saturate(1.3)}
.article-weather[data-glass=refraction]::after{background:radial-gradient(ellipse at var(--glass-x,18%) var(--glass-y,0%),var(--glass-glow),transparent 55%),linear-gradient(115deg,transparent 20%,rgba(255,255,255,.4) 32%,transparent 44%);background-size:100% 100%,240% 100%;box-shadow:inset 2px 2px 2px rgba(255,255,255,.95),inset -2px -2px 3px rgba(255,255,255,.5),inset 0 7px 9px -7px rgba(255,255,255,.95),inset 0 -8px 12px -9px rgba(100,78,88,.6);opacity:.72;animation:uf-glass-gleam 12s ease-in-out infinite alternate}
@keyframes uf-glass-gleam{from{background-position:0 0,100% 0}to{background-position:0 0,0% 0}}
.article-weather__optics{position:absolute;width:0;height:0;pointer-events:none}
.article-weather a:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
.article-weather__title{display:block;margin-bottom:9px;font-size:14px;font-weight:600;line-height:1.2;letter-spacing:-.025em}
.article-toc__title{display:block;margin-bottom:13px;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.article-weather__city{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:6px;align-items:center;min-height:39px;border-top:1px solid rgba(130,102,110,.16)}
.article-weather__city b{font-size:19px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.article-weather__conditions{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;min-width:52px;color:#61585d;font-variant-numeric:tabular-nums;white-space:nowrap}
.article-weather__icon{display:block;width:16px;height:16px;flex:none}.article-weather__icon[hidden]{display:none}
.article-weather__credit{display:inline-block;margin-top:8px;color:#665e62;font-size:14px;text-underline-offset:2px}
body[data-theme=night] .article-weather{--glass-tint:rgba(31,27,30,.82);--glass-glow:rgba(255,239,247,.18);border-color:rgba(255,239,247,.3);box-shadow:0 12px 32px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.08);color:#f7efe4}
body[data-theme=night] .article-weather[data-glass=refraction]{--glass-tint:rgba(31,27,30,.32)}
body[data-theme=night] .article-weather[data-glass=refraction]::before{background:linear-gradient(180deg,transparent,rgba(31,27,30,.7) 23%,rgba(31,27,30,.7) 80%,transparent),var(--glass-tint)}
body[data-theme=night] .article-weather[data-glass=refraction]::after{opacity:.38}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.article-weather::before{background:#fffdf8}body[data-theme=night] .article-weather::before{background:#26211f}}
@media(prefers-reduced-transparency:reduce),(forced-colors:active){.article-weather::before,body[data-theme=night] .article-weather::before{background:var(--surface,Canvas);-webkit-backdrop-filter:none!important;backdrop-filter:none!important}.article-weather::after{display:none}}
@media(prefers-reduced-motion:reduce){.article-weather::after{background:linear-gradient(135deg,var(--glass-glow),transparent 62%);animation:none}}
body[data-theme=night] .article-weather__city{border-top-color:rgba(247,239,228,.22)}
body[data-theme=night] .article-weather__conditions,body[data-theme=night] .article-weather__credit{color:#ddd1d0}
body[data-theme=night] .article-weather__icon{filter:brightness(0) invert(1)}
body.article main > aside.article-toc{position:absolute;top:740px;bottom:0;left:max(3.5vw,24px);width:170px;pointer-events:none}
body.article main > aside.article-toc .article-toc__inner{position:sticky;top:112px;max-height:calc(100vh - 130px);overflow-y:auto;pointer-events:auto}
body.article main > aside.article-toc ol{list-style:none;margin:0;padding:0;border-top:1px solid #c8c2b9}
body.article main > aside.article-toc li{margin:0;border-bottom:1px solid #c8c2b9}
body.article main > aside.article-toc a{display:block;padding:9px 0;color:#4a4641;font:700 13px/1.35 'Nunito Sans',Arial,sans-serif;text-decoration:none}
body.article main > aside.article-toc a:hover,body.article main > aside.article-toc a:focus-visible{color:#181412;text-decoration:underline;text-underline-offset:3px}
.article .story h2[id],.article .story h3[id]{scroll-margin-top:110px}
.article .story blockquote.diary,.article .story blockquote:not(.diary){font-family:Georgia,'Times New Roman',serif!important;font-style:italic!important;font-weight:400!important}
.article .story blockquote.diary :is(p,span,strong,b),.article .story blockquote:not(.diary) :is(p,span,strong,b){font-family:inherit!important;font-style:inherit!important;font-weight:inherit!important}
.article .story blockquote.diary small{font-family:'Nunito Sans',Arial,sans-serif!important;font-style:normal!important;font-weight:900!important}
@media(max-width:1439px){.article-weather{right:24px;width:220px;padding-inline:14px}.article-weather__title{font-size:13px}.article-weather__city{font-size:11.5px}.article-weather__city b{font-size:18px}.article-weather__conditions{min-width:49px;font-size:11px}.article-weather__icon{width:15px;height:15px}}
@media(min-width:1280px) and (max-width:1339px){.article-weather{width:204px;padding-inline:12px}.article-weather__title{font-size:12.5px}.article-weather__city{column-gap:3px;font-size:11px}.article-weather__city b{font-size:17px}.article-weather__conditions{min-width:46px;font-size:10.5px}.article-weather__icon{width:14px;height:14px}.article-weather__credit{font-size:14px}}
@media(min-width:1100px){.article .story > nav.article-toc,.article .story > nav.toc{display:none}}
@media(min-width:1100px) and (max-width:1279px){body.article main > aside.article-toc{left:16px;width:140px}body.article main > aside.article-toc a{font-size:12px}}
@media(max-width:1279px){.article-weather{display:none}}
@media(max-width:1099px){body.article main > aside.article-toc{display:none}}

.article .story blockquote.diary{background:transparent;border:0;padding:0}

/* Reserve the weather rail without shrinking the display type. */
@media(min-width:1280px){body.article:has(.article-weather) .head{box-sizing:border-box;padding-right:280px}}
.article-weather[data-glass=refraction]::after{animation:none}