:root{
  --paper:#F5F2EA; --ink:#1A1A1A; --gold:#D4AF37; --red:#C0392B; --gray:#6b6b6b;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:'Montserrat',sans-serif;background:var(--paper);color:var(--ink);line-height:1.6;overflow-x:hidden;overflow-wrap:break-word}
img{width:100%;max-width:100%;height:100%;object-fit:cover;object-position:var(--focus-x,50%) var(--focus-y,50%);display:block}
.wrap{width:min(100%,1160px);margin:0 auto;padding-inline:20px}
h1,h2,h3,.serif{font-family:'Playfair Display',serif}

.topbar{background:var(--ink);color:#cfc9bb;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.topbar .wrap{display:flex;justify-content:space-between;padding:8px 20px}
.topbar b{color:var(--gold)}

.header{background:var(--paper);border-bottom:3px solid var(--ink);position:sticky;top:0;z-index:50}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.logo{font-family:'Playfair Display',serif;font-weight:900;font-size:1.9rem;letter-spacing:.06em}
.logo span{color:var(--gold)}
.nav{display:flex;gap:18px;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;font-weight:600}
.nav a{color:var(--ink);text-decoration:none;border-bottom:2px solid transparent;padding-bottom:2px}
.nav a:hover{border-color:var(--gold)}
.btn{background:var(--ink);color:var(--gold);border:none;padding:10px 22px;min-height:44px;font-family:'Montserrat',sans-serif;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;cursor:pointer;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
@media(max-width:980px){.nav{display:none}}

.ticker{background:var(--red);color:#fff;overflow:hidden;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em}
.ticker-line{display:inline-block;white-space:nowrap;padding:8px 0;animation:tick 40s linear infinite}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.hero{padding:48px 0 30px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:40px;align-items:start}
.rubric{display:inline-block;background:var(--red);color:#fff;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;padding:4px 10px;margin-bottom:14px}
.rubric.gold{background:var(--gold);color:var(--ink)}
.rubric.dark{background:var(--ink);color:var(--gold)}
.hero h1{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:900;line-height:1.08;text-transform:uppercase;margin-bottom:18px}
.hero .lead{font-size:1.15rem;font-style:italic;color:#3c3c3c;border-left:3px solid var(--gold);padding-left:18px;margin-bottom:18px}
.byline{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gray);margin-bottom:14px}
.tags span{display:inline-block;border:1px solid #c9c2b2;color:#6b6455;font-size:.7rem;padding:3px 10px;margin:0 6px 6px 0;text-transform:lowercase}
.hero-photo{width:100%;max-height:520px;aspect-ratio:4/5;border:4px solid var(--ink);box-shadow:12px 12px 0 var(--gold);overflow:hidden}
.teasers{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.teaser{border-top:1px solid #d8d2c2;padding-top:10px;font-size:.85rem}
.teaser b{color:var(--red)}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:30px}.hero-photo{width:min(100%,560px);max-height:none;aspect-ratio:1/1;margin-inline:auto}}

.section{padding:44px 0;border-top:1px solid #ddd6c6}
.section h2{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:900;text-transform:uppercase;letter-spacing:.02em;margin-bottom:8px}
.section .sub{color:var(--gray);font-size:.95rem;margin-bottom:26px;font-style:italic}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{min-width:0;background:#fff;border:1px solid #e2dccc;padding:16px}
.card .ph{height:auto;aspect-ratio:1/1;margin-bottom:14px;border:1px solid #e2dccc;overflow:hidden}
.grid2>.card[style] .ph{height:auto!important;min-height:0!important;aspect-ratio:1/1}
.card h3{font-size:1.25rem;font-weight:700;margin-bottom:8px}
.card p{font-size:.92rem;color:#555;font-style:italic}
.list li{list-style:none;padding-left:28px;position:relative;margin-bottom:16px;font-size:1.05rem}
.list li::before{content:'→';position:absolute;left:0;color:var(--gold);font-weight:700}

.ad{border:2px dashed var(--red);background:#fff;padding:22px 26px;margin:36px 0;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.ad .ad-label{position:absolute;transform:translateY(-34px);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.ad-box{position:relative}
.ad h3{font-size:1.3rem;text-transform:uppercase}
.ad p{font-size:.85rem;color:#666}
.ad small{width:100%;color:#999;font-size:.68rem}

.pose{background:var(--ink);color:#fff;padding:70px 0;text-align:center}
.pose h2{color:var(--gold);font-size:clamp(1.8rem,4vw,3rem);text-transform:uppercase;margin-bottom:14px}
.pose .ph{width:min(100%,640px);height:auto;aspect-ratio:1/1;margin:26px auto;border:5px solid var(--gold);box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden}
.pose p{max-width:760px;margin:0 auto;font-size:1.1rem}

.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1000px){.quotes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.quotes{grid-template-columns:1fr}}
.q{background:#fff;border-left:5px solid var(--gold);padding:20px}
.q .qt{font-family:'Playfair Display',serif;font-size:1.35rem;font-weight:700;margin-bottom:8px}
.q .qx{font-size:.82rem;color:#777;font-style:italic}
.q.censored .qt span{background:var(--ink);color:var(--ink);user-select:none}
.q.censored{border-left-color:var(--red)}

.mostread ol{list-style:none;counter-reset:mr}
.mostread li{counter-increment:mr;display:flex;gap:18px;align-items:baseline;padding:14px 0;border-bottom:1px solid #ddd6c6;font-family:'Playfair Display',serif;font-size:1.15rem;font-weight:700}
.mostread li::before{content:counter(mr);font-size:2rem;color:var(--gold);font-weight:900;min-width:34px}

.comment{display:flex;gap:14px;margin-bottom:20px}
.ava{width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.c-body{background:#fff;border:1px solid #e2dccc;padding:14px 18px;flex:1}
.c-name{font-weight:700;font-size:.85rem}
.c-name span{color:#999;font-weight:400;margin-left:8px;font-size:.72rem}
.c-text{font-size:.95rem}

.finale{background:linear-gradient(135deg,var(--gold),#f4e5a1);padding:90px 0;text-align:center}
.finale h2{font-size:clamp(2rem,5vw,3.4rem);font-weight:900;text-transform:uppercase;margin-bottom:20px}
.finale p{max-width:760px;margin:0 auto 36px;font-size:1.2rem}

.footer{background:var(--ink);color:#8d8778;padding:40px 0;font-size:.8rem}
.footer .wrap{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between}
.footer b{color:var(--gold)}

/* Точки фокуса держат лицо в кадре при любом соотношении сторон контейнера. */
img[src$="business-deal.png"]{--focus-x:50%;--focus-y:28%}
img[src$="hero-portrait.png"]{--focus-x:44%;--focus-y:30%}
img[src$="hunt-anarak.png"]{--focus-x:50%;--focus-y:28%}
img[src$="hunt-horse.png"]{--focus-x:45%;--focus-y:25%}
img[src$="hunt-night.png"]{--focus-x:36%;--focus-y:24%}
img[src$="hunt-polo.png"]{--focus-x:42%;--focus-y:28%}
img[src$="hunt-spring.png"]{--focus-x:52%;--focus-y:24%}
img[src$="hunt-tree.png"]{--focus-x:50%;--focus-y:28%}
img[src$="hunt-winter.png"]{--focus-x:38%;--focus-y:28%}
img[src$="society-leaders.png"]{--focus-x:43%;--focus-y:54%}
img[src$="society-presswall.png"]{--focus-x:50%;--focus-y:32%}
img[src$="style-look1.png"]{--focus-x:50%;--focus-y:32%}
img[src$="style-look2.png"]{--focus-x:45%;--focus-y:30%}
img[src$="style-look3.png"]{--focus-x:48%;--focus-y:30%}
img[src$="umbrella-hat.png"]{--focus-x:57%;--focus-y:42%}

@media(max-width:980px) and (min-width:641px){
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:640px){
  .wrap{padding-inline:14px}
  .topbar .wrap{flex-direction:column;align-items:flex-start;gap:2px;padding-block:7px;font-size:.66rem;line-height:1.45}
  .header .wrap{gap:10px;padding-block:10px}
  .logo{font-size:1.55rem;letter-spacing:.04em}
  .header .btn{padding-inline:13px;font-size:.68rem;letter-spacing:.09em}
  .ticker{font-size:.7rem}
  .hero{padding:32px 0 24px}
  .hero h1{font-size:clamp(2rem,11vw,3rem)}
  .hero .lead{font-size:1rem;padding-left:13px}
  .byline{font-size:.68rem;letter-spacing:.08em}
  .hero-photo{border-width:3px;box-shadow:7px 7px 0 var(--gold)}
  .section{padding:34px 0}
  .section .sub{margin-bottom:20px}
  .grid2,.grid3{grid-template-columns:1fr;gap:18px}
  .card{padding:12px}
  .list li{font-size:.98rem;margin-bottom:13px}
  .ad{padding:20px 16px;align-items:stretch}
  .ad .btn{width:100%}
  .pose{padding:46px 0}
  .pose .ph{margin-block:20px;border-width:3px;box-shadow:0 20px 45px rgba(0,0,0,.5)}
  .pose p{font-size:1rem}
  .q{padding:16px}
  .q .qt{font-size:1.2rem}
  .comment{gap:10px}
  .ava{width:40px;height:40px;font-size:.8rem}
  .c-body{min-width:0;padding:12px}
  .c-name span{display:block;margin-left:0}
  .finale{padding:58px 0}
  .finale p{font-size:1.05rem;margin-bottom:28px}
  .footer{padding:30px 0}
  .footer .wrap{flex-direction:column;gap:12px}
}

@media(max-width:360px){
  .logo{font-size:1.35rem}
  .header .btn{padding-inline:10px;font-size:.62rem;letter-spacing:.06em}
  .hero h1{font-size:1.9rem}
  .tags span{padding-inline:7px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker-line{animation:none}
  .btn{transition:none}
}