/* Православная мама — журнал. Системные шрифты, без внешних запросов. */
:root{
  --paper:#f6f7f3;
  --sheet:#ffffff;
  --ink:#24262b;
  --muted:#5f6268;
  --line:#dcdfd6;
  --blue:#2d4a8a;
  --cherry:#a3283a;
  --herb:#4f7a43;
  --ochre:#a8741a;
  --linen:#f1efe6;
  --serif:"PT Serif","Iowan Old Style",Charter,Georgia,Cambria,"Times New Roman",serif;
  --sans:"PT Sans","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.6 var(--serif)}
img,svg{max-width:100%;height:auto;display:block}
.lead img,.trio img,.art figure img,.feed img{width:100%}
a{color:var(--blue);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--cherry)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--blue);color:#fff;padding:8px 12px}
.skip:focus{left:8px;z-index:9}

/* вышитая лента */
.band{height:14px;background-color:var(--linen);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='14' viewBox='0 0 56 14'%3E%3Cg stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 3l4 4M7 3l-4 4M10 6l4 4M14 6l-4 4M17 3l4 4M21 3l-4 4M24 0l4 4M28 0l-4 4' stroke='%23a3283a'/%3E%3Cpath d='M31 3l4 4M35 3l-4 4M38 6l4 4M42 6l-4 4M45 3l4 4M49 3l-4 4M52 0l4 4M56 0l-4 4' stroke='%232d4a8a'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:0 2px;border-top:1px solid #e3ddcc;border-bottom:1px solid #e3ddcc}

.wrap{max-width:1160px;margin:0 auto;padding:0 16px}

/* шапка */
.mast{background:var(--sheet);text-align:center;padding:26px 0 0}
.mast .logo{display:inline-block;color:var(--ink);text-decoration:none}
.mast .logo b{display:block;font-weight:700;font-size:clamp(34px,6vw,58px);line-height:1.05;letter-spacing:-.01em}
.mast .logo span{display:block;font:italic 17px/1.4 var(--serif);color:var(--muted);margin-top:6px}
.rub{margin-top:22px;border-top:1px solid var(--line);font-family:var(--sans)}
.rub ul{list-style:none;margin:0 auto;padding:0;display:flex;justify-content:center;gap:4px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.rub ul::-webkit-scrollbar{display:none}
.rub a{display:block;padding:12px 14px;color:var(--ink);text-decoration:none;font-size:16px;border-bottom:3px solid transparent}
.rub a:hover,.rub a[aria-current]{border-bottom-color:var(--c,var(--cherry));color:var(--ink)}
.c-pit{--c:var(--herb)} .c-pra{--c:var(--cherry)} .c-sem{--c:var(--blue)} .c-rec{--c:var(--ochre)}

/* метка рубрики */
.tag{font:600 14px/1.3 var(--sans);color:var(--c,var(--cherry));text-decoration:none}
.tag::before{content:"";display:inline-block;width:9px;height:9px;margin-right:7px;background:currentColor;transform:rotate(45deg);vertical-align:1px}
.date{font:14px/1.3 var(--sans);color:var(--muted)}

/* главная */
.lead{display:grid;grid-template-columns:1.25fr 1fr;gap:36px;align-items:center;padding:40px 0 36px;border-bottom:1px solid var(--line)}
.lead .pic{background:var(--linen);border:1px solid #e3ddcc}
.lead h1{font-size:clamp(28px,3.6vw,42px);line-height:1.15;margin:12px 0 14px;font-weight:700}
.lead h1 a{color:var(--ink);text-decoration:none}
.lead h1 a:hover{color:var(--cherry)}
.lead p{margin:0 0 14px;color:#3b3e45}

.cols{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:48px;padding:34px 0 46px}
.sec-h{font:700 23px/1.2 var(--serif);margin:0 0 6px}
.sec-sub{font:15px/1.5 var(--sans);color:var(--muted);margin:0 0 20px}

.feed{list-style:none;margin:0;padding:0}
.feed li{display:grid;grid-template-columns:168px minmax(0,1fr);gap:20px;padding:20px 0;border-top:1px solid var(--line)}
.feed li:first-child{border-top:0;padding-top:6px}
.feed .pic{background:var(--linen);border:1px solid #e3ddcc;align-self:start}
.feed h3{font-size:21px;line-height:1.25;margin:6px 0 8px}
.feed h3 a{color:var(--ink);text-decoration:none}
.feed h3 a:hover{color:var(--cherry)}
.feed p{margin:0 0 6px;font-size:16.5px;color:#41444b}

aside .box{background:var(--sheet);border:1px solid var(--line);padding:20px 22px;margin-bottom:24px}
aside h2{font:700 20px/1.25 var(--serif);margin:0 0 12px}
.cal{list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:15.5px}
.cal li{display:grid;grid-template-columns:64px 1fr;gap:10px;padding:9px 0;border-top:1px dashed var(--line)}
.cal li:first-child{border-top:0}
.cal time{font-weight:700;color:var(--cherry)}
.cal small{display:block;color:var(--muted)}
.dl{display:flex;gap:14px;align-items:flex-start;text-decoration:none;color:var(--ink)}
.dl img{width:84px;flex:none;border:1px solid #e3ddcc}
.dl b{display:block;font-size:17px;line-height:1.3;margin-bottom:4px}
.dl span{font:14px/1.4 var(--sans);color:var(--muted)}
.rlist{list-style:none;margin:0;padding:0;font-family:var(--sans)}
.rlist li{padding:7px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between}
.rlist li:first-child{border-top:0}
.rlist a{color:var(--ink);text-decoration:none}
.rlist a:hover{color:var(--cherry)}
.rlist span{color:var(--muted)}

.strip{background:var(--sheet);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0 38px}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.trio a.pic{display:block;background:var(--linen);border:1px solid #e3ddcc;margin-bottom:12px}
.trio h3{font-size:19px;line-height:1.3;margin:6px 0 6px}
.trio h3 a{color:var(--ink);text-decoration:none}
.trio p{margin:0;font-size:16px;color:#41444b}

.years{padding-top:34px;padding-bottom:50px}
.years dl{display:grid;grid-template-columns:90px minmax(0,1fr);margin:0;border-top:1px solid var(--line)}
.years dt{font:700 26px/1 var(--serif);color:var(--blue);padding:16px 0}
.years dd{margin:0;padding:14px 0;border-bottom:1px solid var(--line)}
.years dd a{display:inline-block;margin:2px 18px 2px 0}

/* статья */
.art{max-width:752px;margin:0 auto;padding-top:38px;padding-bottom:30px}
.crumbs{font:14px/1.4 var(--sans);color:var(--muted);margin-bottom:16px}
.crumbs a{color:var(--muted)}
.art h1{font-size:clamp(29px,4.4vw,44px);line-height:1.13;margin:10px 0 14px}
.art .lede{font-size:21px;line-height:1.5;color:#3b3e45;margin:0 0 18px}
.meta{font:14.5px/1.5 var(--sans);color:var(--muted);padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:26px}
.art figure{margin:0 0 28px}
.art figure .pic{background:var(--linen);border:1px solid #e3ddcc}
.art figcaption{font:14px/1.45 var(--sans);color:var(--muted);margin-top:8px}
.body{font-size:19px;line-height:1.72}
.body>p:first-of-type::first-letter{float:left;font-size:3.6em;line-height:.86;margin:.06em .1em 0 0;color:var(--c,var(--cherry));font-weight:700}
.body h2{font-size:26px;line-height:1.25;margin:38px 0 10px}
.body h3{font-size:21px;margin:28px 0 8px}
.body ul,.body ol{padding-left:1.3em}
.body li{margin:6px 0}
.body blockquote{margin:26px 0;padding:4px 0 4px 22px;border-left:3px solid var(--c,var(--cherry));font-style:italic;color:#3b3e45}
.note{font:16.5px/1.55 var(--sans);background:#eef2f9;border-left:4px solid var(--blue);padding:14px 18px;margin:26px 0}
.note b{display:block;margin-bottom:2px}
.body table{border-collapse:collapse;width:100%;font:16px/1.45 var(--sans);margin:18px 0}
.body th,.body td{border-bottom:1px solid var(--line);padding:9px 8px;text-align:left;vertical-align:top}
.body th{background:var(--linen)}
.tablewrap{overflow-x:auto}
.more{max-width:752px;margin:0 auto;padding-top:10px;padding-bottom:50px}
.more h2{font:700 21px/1.3 var(--serif);margin:0 0 10px}
.more ul{margin:0;padding-left:1.1em}
.more li{margin:6px 0}

/* рубрика */
.rh{padding:36px 0 10px;max-width:760px}
.rh h1{font-size:clamp(30px,4.5vw,44px);margin:6px 0 8px;line-height:1.15}
.rh p{color:#3b3e45;margin:0}
.rgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;padding-top:12px;padding-bottom:50px}
.rgrid .feed li:first-child{border-top:1px solid var(--line);padding-top:20px}

/* страница */
.page{max-width:752px;margin:0 auto;padding-top:38px;padding-bottom:56px}
.page h1{font-size:clamp(30px,4.5vw,44px);line-height:1.15;margin:0 0 18px}
.page h2{font-size:24px;margin:34px 0 10px}

/* подвал */
.foot{background:var(--sheet);border-top:1px solid var(--line);margin-top:0;font:15px/1.6 var(--sans);color:var(--muted)}
.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;padding:30px 16px 34px}
.foot b{display:block;font:700 19px/1.3 var(--serif);color:var(--ink);margin-bottom:6px}
.foot ul{list-style:none;margin:0;padding:0}
.foot a{color:var(--ink)}

/* 404 */
.lost{text-align:center;max-width:652px;margin:0 auto;padding-top:46px;padding-bottom:60px}
.lost .pic{width:260px;margin:0 auto 22px;background:var(--linen);border:1px solid #e3ddcc}
.lost h1{font-size:34px;margin:0 0 10px}
.lost ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;font-family:var(--sans)}

@media (max-width:900px){
  .lead{grid-template-columns:1fr;gap:18px;padding-top:24px}
  .cols{grid-template-columns:1fr;gap:20px}
  .trio{grid-template-columns:1fr;gap:26px}
  .rgrid{grid-template-columns:1fr}
  .foot .wrap{grid-template-columns:1fr;gap:18px}
}
@media (max-width:560px){
  body{font-size:17px}
  .rub ul{justify-content:flex-start}
  .rub a{padding:11px 10px;font-size:15px}
  .feed li{grid-template-columns:96px minmax(0,1fr);gap:14px}
  .feed h3{font-size:18.5px}
  .feed p{display:none}
  .body{font-size:18px}
  .art .lede{font-size:19px}
  .years dl{grid-template-columns:62px minmax(0,1fr)}
  .years dt{font-size:21px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
