:root{
  --plaster:#ece7dd;--card:#f4f0e8;--ink:#221e17;--sepia:#4c3f2c;--muted:#726957;--line:#d9d2c4;--gilt:#9c7a3d;
  --serif:ui-serif,"New York",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--plaster);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--gilt)}
.wrap{max-width:768px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
header{border-bottom:1px solid var(--line);background:rgba(236,231,221,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;padding-top:env(safe-area-inset-top)}
.nav{display:flex;align-items:center;justify-content:space-between;height:62px}
.wordmark{display:inline-flex;border:1.5px solid var(--ink);padding:6px 12px;letter-spacing:.16em;font-size:13px;font-weight:600;color:var(--ink);text-decoration:none}
.nav .back{font-size:13px;color:var(--sepia);text-decoration:none}
.nav .back:hover{color:var(--gilt)}
article{padding:clamp(38px,7vw,68px) 0}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gilt);font-weight:600}
article h1{font-family:var(--serif);font-weight:500;font-size:clamp(30px,5vw,46px);line-height:1.12;margin:14px 0 0;letter-spacing:-.01em;text-wrap:balance}
.meta{color:var(--muted);font-size:14px;margin-top:14px}
article h2{font-family:var(--serif);font-weight:500;font-size:clamp(22px,3vw,30px);margin:36px 0 12px}
article p{margin:0 0 18px;color:var(--sepia)}
article ul{color:var(--sepia);padding-left:20px;margin:0 0 18px}
article li{margin:7px 0}
.cta{background:var(--ink);color:var(--plaster);padding:26px 28px;margin:38px 0;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.cta p{margin:0;color:rgba(236,231,221,.82);font-family:var(--serif);font-size:19px}
.cta a{background:var(--gilt);color:#fff;text-decoration:none;padding:13px 24px;font-size:14px;white-space:nowrap}
.cta a:hover{filter:brightness(1.08)}
.more{border-top:1px solid var(--line);margin-top:42px;padding-top:22px}
.more .eyebrow{margin-bottom:8px;display:block}
.more a{display:block;padding:9px 0;color:var(--ink);text-decoration:none;font-family:var(--serif);font-size:18px;border-bottom:1px solid var(--line)}
.more a:hover{color:var(--gilt)}
footer{background:var(--ink);color:rgba(236,231,221,.55);padding:24px 0;font-size:13px;margin-top:10px}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* мгновенная навигация: мягкий кросс-фейд между страницами */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:no-preference){
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.34s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* нативный прогресс-бар чтения (scroll-driven) */
.progress{position:fixed;top:0;left:0;right:0;height:2px;transform-origin:0 50%;transform:scaleX(0);
  background:var(--gilt);z-index:20;pointer-events:none}
@supports (animation-timeline: scroll()){
  .progress{animation:readGrow linear both;animation-timeline:scroll(root block)}
  @keyframes readGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
@media(prefers-reduced-motion:reduce){.progress{display:none}}