/* Journal, Our story, FAQ */

/* Journal: три заметки, фото и текст в две колонки, чередуются */
.jr{display:grid;gap:clamp(72px,10vw,140px);padding-bottom:clamp(72px,9vw,140px)}
.jr__item{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,96px);align-items:start;scroll-margin-top:110px}
.jr__item:nth-child(even){grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.jr__item:nth-child(even) .jr__fig{order:2}
.jr__item--wide,.jr__item--wide:nth-child(even){grid-template-columns:minmax(0,1fr)}
.jr__item--wide .jr__fig,.jr__item--wide:nth-child(even) .jr__fig{order:0}
.jr__fig,.story__fig{margin:0}
.jr__tile--tall{aspect-ratio:860/1147}
.jr__tile--strip{aspect-ratio:1500/558}
.jr__tile--photo{aspect-ratio:3/2}
.jr__fig figcaption,.story__fig figcaption{margin-top:14px;max-width:62ch;color:var(--ink-mute);text-transform:none;letter-spacing:.02em}
.jr__fig figcaption a,.story__fig figcaption a{color:var(--ink)}
.jr__no,.story__no{margin-bottom:14px;color:var(--brass)}
.jr__body h2,.story__row h2{font-size:clamp(32px,4.2vw,60px);line-height:.98;margin-bottom:24px}
.jr__body p,.story__text p,.story__intro p,.story__where p{max-width:60ch}
.jr__body p+p,.story__text p+p{margin-top:14px}
.jr__body a:not(.btn),.story a:not(.btn){border-bottom:1px solid var(--line-strong);transition:color .2s,border-color .2s}
@media (hover:hover) and (pointer:fine){.jr__body a:not(.btn):hover,.story a:not(.btn):hover{color:var(--brass);border-color:var(--brass)}}
.jr__sub{margin:30px 0 10px;color:var(--brass)}
.jr__list{display:grid;gap:8px;padding:0;list-style:none}
.jr__list li{position:relative;padding-left:20px}
.jr__list li::before{content:"";position:absolute;left:0;top:.8em;width:8px;height:1px;background:var(--brass)}
.jr__steps{counter-reset:s;display:grid;gap:20px;margin:24px 0;padding:0;list-style:none;max-width:60ch}
.jr__steps li{counter-increment:s;position:relative;padding-left:46px}
.jr__steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.15em;font:500 11px/1.5 var(--ff-mono);letter-spacing:.08em;color:var(--brass)}
.jr__steps b{display:block;margin-bottom:4px;font:600 12px/1.5 var(--ff-mono);letter-spacing:.09em;text-transform:uppercase}
@media (max-width:900px){
  .jr__item,.jr__item:nth-child(even){grid-template-columns:minmax(0,1fr)}
  .jr__item:nth-child(even) .jr__fig{order:0}
}

/* Our story */
.story{display:grid;gap:clamp(64px,9vw,128px);padding-bottom:clamp(72px,9vw,140px)}
.story__intro{display:grid;gap:28px}
.story__lead{font-size:clamp(36px,6vw,92px);line-height:.95;max-width:16ch}
.story__facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px;margin:12px 0 0;border-top:1px solid var(--line-strong)}
.story__facts>div{display:grid;gap:8px;padding-top:18px;align-content:start}
.story__facts dt{color:var(--ink-mute)}
.story__facts dd{margin:0;font:700 clamp(20px,2vw,30px)/1.05 var(--ff-display);text-transform:uppercase}
.story__row{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,96px);align-items:center}
.story__row--flip{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.story__row--flip .story__fig{order:-1}
.story__tile{aspect-ratio:4/3}
.story__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.story__where{display:grid;gap:6px;padding-top:28px;border-top:1px solid var(--line)}
@media (max-width:900px){
  .story__row,.story__row--flip{grid-template-columns:minmax(0,1fr)}
  .story__row--flip .story__fig{order:0}
  .story__facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
  .story__facts>div{padding-bottom:18px}
}

/* FAQ: вопросы раскрываются, как в обычном details */
.faq details{border-bottom:1px solid var(--line)}
.faq section>h2+details{border-top:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;cursor:pointer;list-style:none;font:700 clamp(20px,2.2vw,28px)/1.1 var(--ff-display);text-transform:uppercase;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary{color:var(--brass)}
.faq details[open] summary::after{transform:rotate(45deg)}
@media (hover:hover) and (pointer:fine){.faq summary:hover{color:var(--brass)}}
.faq .a{padding:0 0 24px;max-width:68ch}
.faq .a p+p{margin-top:12px}
.faq section{gap:0}