/* Списки записей (новости, рубрики, метки, архив автора, поиск) и блок «Похожие записи»: доска тёмного дерева, к ней латунными
   гвоздиками приколоты вырезки из вестника. У вырезки вверху светлое поле бумаги: слева рубрики, справа почтовый штемпель даты
   (fx/stamp.js ставит его при входе в экран; на снимок он не заходит). Снимки - в настоящих цветах; у записи с роликом снимок -
   кадр плёнки с перфорацией. Нумерация страниц - латунные номерки внизу доски. Подключается после pages.css и поправляет его. */

/* ---------- штемпель даты: без скриптов - бумажная плашка с датой, со скриптом (класс sht-on) - оттиск ---------- */
.shtempel{position:relative;z-index:3;flex:none;display:inline-block;pointer-events:none;font-family:var(--text);font-size:.86rem;line-height:1;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:#2a1c0a;padding:7px 11px 6px;background:linear-gradient(175deg,#f6ebcd,#eadab0);border:1px solid rgba(90,58,30,.55)}
.shtempel.sht-on{padding:0;background:none;border:0;line-height:0;letter-spacing:0;text-transform:none}
.shtempel .sht-sr{position:absolute;left:0;top:0;font-size:.7rem;line-height:1;white-space:nowrap;opacity:0;clip-path:inset(50%);pointer-events:none}
.shtempel svg{display:block;overflow:visible}

/* ---------- доска ---------- */
.pg-list .plaque{padding-bottom:clamp(16px,2.6vw,30px)}
.sec-list{padding-top:clamp(6px,1.6vw,18px)}
.board{--fr:8px;--cols:1;--cw:420px;--sht-size:72px;position:relative;width:fit-content;max-width:100%;margin:0 auto;padding:30px 12px 24px;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.38) 0 1px,rgba(255,214,150,.055) 1px 2px,rgba(0,0,0,0) 2px 172px),
    repeating-linear-gradient(91deg,rgba(255,214,150,.03) 0 2px,rgba(0,0,0,0) 2px 9px),
    linear-gradient(180deg,#35210f 0%,#2b1a0b 52%,#241508 100%);
  border:var(--fr) solid #4a2d13;border-color:#6b4621 #3b220e #2a1708 #563619;
  box-shadow:inset 0 0 0 1px #120a04,inset 0 0 0 2px rgba(240,190,98,.2),inset 0 12px 22px rgba(0,0,0,.5),0 0 0 1px #120a04,0 26px 46px rgba(0,0,0,.55)}
/* латунные уголки рамы */
.board::before{content:"";position:absolute;inset:calc(-1 * var(--fr));pointer-events:none;
  background:
    linear-gradient(135deg,#e2bf74 0,#b9812c 11px,#6a4413 12px,rgba(0,0,0,0) 12.5px) 0 0/30px 30px no-repeat,
    linear-gradient(225deg,#d9b46a 0,#a87427 11px,#6a4413 12px,rgba(0,0,0,0) 12.5px) 100% 0/30px 30px no-repeat,
    linear-gradient(45deg,#b9812c 0,#8a5f22 11px,#4a2f12 12px,rgba(0,0,0,0) 12.5px) 0 100%/30px 30px no-repeat,
    linear-gradient(315deg,#a87427 0,#7a5524 11px,#4a2f12 12px,rgba(0,0,0,0) 12.5px) 100% 100%/30px 30px no-repeat}
.board[data-n="1"] .clips{--cols:1}
.board .clips{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,var(--cw)));gap:34px 22px;align-items:start;justify-content:center}

/* ---------- вырезка ---------- */
.board .clip{position:relative;z-index:0;display:flex;flex-direction:column;min-width:0;padding:12px 13px 16px;color:var(--ink);border:0;transform:rotate(-.55deg);box-shadow:0 14px 18px -4px rgba(0,0,0,.6);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.board .clip:nth-child(2n){transform:rotate(.5deg)}
.board .clip:nth-child(3n){transform:rotate(-.25deg)}
.board .clip:nth-child(4n){transform:rotate(.7deg)}
.board .clip::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(172deg,#f1e4c2 0%,#e7d6ac 58%,#dbc895 100%);
  clip-path:polygon(0 .7%,.5% 0,99.2% .25%,100% 1%,99.55% 99.2%,98.9% 100%,.8% 99.65%,0 98.9%)}
.board .clip:nth-child(2n)::before{clip-path:polygon(.4% 0,99.4% .5%,100% 1.1%,99.7% 99%,99% 100%,.3% 99.5%,0 98.7%,.2% .8%)}
/* гвоздик */
.board .clip::after{content:"";position:absolute;left:50%;top:-6px;width:15px;height:15px;margin-left:-7.5px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#fff0c4 0%,#f0be62 28%,#b9812c 64%,#6a4413 100%);box-shadow:0 0 0 1px #4a2f12,2px 5px 5px rgba(0,0,0,.5)}

/* светлое поле: рубрики слева, штемпель справа */
.clip-top{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;min-height:calc(var(--sht-size) * 1.04 + 6px);padding:6px 0 9px 3px}
.clip-top .shtempel{order:2;align-self:flex-start;margin:0 -2px 0 0}
.board .clip-cats{order:1;display:block;margin:0;min-width:0;font-family:var(--text);font-style:italic;font-size:.94rem;line-height:1.3;letter-spacing:.01em;text-transform:none;color:#6b4a1c;overflow-wrap:anywhere}
.board .clip-cats a{padding:0;border:0;font-size:inherit;letter-spacing:inherit;text-transform:none;color:inherit;transition:color .25s}
.board .clip-cats a+a::before{content:", "}
.board .clip-cats a:hover{color:#5b1d0e}

/* снимок: настоящие цвета, тонкая рамка */
.board .clip-f{position:relative;display:block;overflow:hidden;background:#cdb98a;border:1px solid rgba(50,32,10,.6)}
.board .clip-f img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:0;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
/* запись с роликом: кадр плёнки - перфорация сверху и снизу */
.board .clip[data-format=video] .clip-f{padding:13px 0;background:#0e0b07;border-color:#0e0b07}
.board .clip[data-format=video] .clip-f::before,.board .clip[data-format=video] .clip-f::after{content:"";position:absolute;left:0;right:0;height:13px;
  background:
    linear-gradient(90deg,rgba(0,0,0,0) 5px,#d8c696 5px 13px,rgba(0,0,0,0) 13px) 0 4px/18px 5px repeat-x,
    linear-gradient(90deg,rgba(0,0,0,0) 6px,#d8c696 6px 12px,rgba(0,0,0,0) 12px) 0 3px/18px 7px repeat-x}
.board .clip[data-format=video] .clip-f::before{top:0}
.board .clip[data-format=video] .clip-f::after{bottom:0}

.board .clip-h{font-family:var(--serif);font-weight:600;font-size:clamp(1.4rem,5.6vw,1.62rem);line-height:1.1;letter-spacing:0;color:#160d04;margin-top:13px;overflow-wrap:break-word}
.board .clip-h a{color:inherit;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s cubic-bezier(.2,.7,.2,1)}
.board .clip-h a:hover{color:inherit;background-size:100% 1px}
.board .clip-meta{margin-top:10px;padding-top:7px;border-top:1px solid rgba(60,40,14,.45);font-size:.92rem;font-style:italic;line-height:1.35;color:#4a2f14}
.board .clip-by{margin-left:8px}
.board .clip-by a{color:#4a1a0c;border-bottom:1px solid rgba(74,26,12,.5)}
.board .clip-x{margin-top:8px;font-size:1rem;line-height:1.5;color:#1c1206;overflow-wrap:break-word}
.board .clip-more{position:relative;margin-top:14px;padding-top:0;min-height:0;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:10px}
.board .clip-more>a{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.16rem;line-height:1.2;letter-spacing:0;text-transform:none;color:#5b1d0e;border-bottom:1px solid rgba(91,29,14,.55);transition:border-color .25s,color .25s}
.board .clip-more>a:hover{color:#2a1a08;border-color:#2a1a08}
/* «поделиться»: круглая кнопка; значки раскрываются листком над ней и ничего не сдвигают */
.board .clip-share{position:relative;display:block;margin-left:auto}
.board .clip-share summary{list-style:none;display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(60,40,14,.6);border-radius:50%;color:#4a2f14;cursor:pointer;transition:background .25s,color .25s}
.board .clip-share summary::-webkit-details-marker{display:none}
.board .clip-share summary:hover,.board .clip-share[open] summary{background:#2a1a08;color:#f1e8d2}
.board .clip-share .ic{width:18px;height:18px}
.board .clip-share .share{position:absolute;right:-3px;bottom:calc(100% + 9px);z-index:4;display:flex;flex-wrap:nowrap;gap:4px;margin:0;padding:6px;background:linear-gradient(175deg,#f6ebcd,#eadab0);border:1px solid rgba(60,40,14,.6);box-shadow:0 8px 14px rgba(40,26,8,.4)}
.board .clip .share a{width:36px;height:36px;border:1px solid rgba(60,40,14,.4);color:#4a2f14}
.board .clip .share a:hover{background:#2a1a08;color:#f1e8d2}

/* вырезка без снимка - заметка: заголовок крупнее, под полем двойная линейка, анонс курсивом */
.board .clip.no-pic .clip-top{border-bottom:3px double rgba(60,40,14,.7)}
.board .clip.no-pic .clip-h{font-size:clamp(1.7rem,6.8vw,2rem);line-height:1.06;margin-top:16px}
.board .clip.no-pic .clip-x{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.3rem;line-height:1.3;margin-top:10px}

/* «Похожие записи» (на странице записи их бывает до девяти) - малые вырезки-заметки: то же светлое поле со штемпелем, под ним
   небольшой снимок слева и заголовок справа, дальше дата, анонс и «Продолжить чтение» во всю ширину */
.related .board{--sht-size:62px}
.related .board .clip{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:13px;align-items:center;padding:10px 12px 14px}
.related .board .clip>*{grid-column:1/-1}
.related .board .clip-top{padding:4px 0 8px 2px}
.related .board .clip-f{grid-column:1;grid-row:2}
.related .board .clip[data-format=video] .clip-f{padding:9px 0}
.related .board .clip[data-format=video] .clip-f::before,.related .board .clip[data-format=video] .clip-f::after{height:9px;background-position:0 2px,0 1px;background-size:14px 5px,14px 7px}
.related .board .clip-h{grid-column:2;grid-row:2;margin-top:0;font-size:1.26rem;line-height:1.1}
.related .board .clip.no-pic .clip-h{grid-column:1/-1;grid-row:auto;margin-top:12px;font-size:1.5rem}
.related .board .clip.no-pic .clip-x{font-size:1.2rem}
.related .board .clip-meta{margin-top:11px}
.related .board .clip-x{font-size:.98rem;line-height:1.45}
.related .board .clip-more{margin-top:10px}
.related .board .clips{gap:30px 20px}

/* ---------- номерки страниц ---------- */
.board .pager{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.board .pager a,.board .pager span{position:relative;display:grid;place-items:center;min-width:50px;height:50px;padding:7px 0 0;border:0;border-radius:50%;font-family:var(--text);font-weight:700;font-size:1.14rem;line-height:1;color:#2a1708;text-shadow:0 1px 0 rgba(255,233,180,.45);
  background:radial-gradient(circle at 34% 26%,#d2aa5e 0%,#a87427 52%,#7a5524 100%);
  box-shadow:0 0 0 1px #2a1708,inset 0 1px 0 rgba(255,233,180,.5),inset 0 -2px 3px rgba(50,30,8,.6),3px 6px 7px rgba(0,0,0,.5);transition:filter .25s,transform .25s}
.board .pager a::before,.board .pager span::before{content:"";position:absolute;left:50%;top:6px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#1c1108;box-shadow:0 1px 0 rgba(255,233,180,.45)}
.board .pager a:hover{background:radial-gradient(circle at 34% 26%,#d2aa5e 0%,#a87427 52%,#7a5524 100%);color:#160d04;filter:brightness(1.16);transform:translateY(-2px)}
.board .pager span{background:radial-gradient(circle at 34% 26%,#fff3cf 0%,#f0be62 44%,#c9923a 100%);color:#160d04}
.board .list-none{margin:0 auto;padding:18px 22px;max-width:420px;font-size:1.1rem;color:var(--ink);background:linear-gradient(172deg,#f1e4c2,#e7d6ac 58%,#dbc895);box-shadow:0 14px 18px -4px rgba(0,0,0,.6);transform:rotate(-.5deg)}

/* обводка при переходе с клавиатуры: на бумаге - тёмная */
.board .clip a:focus-visible,.board .clip summary:focus-visible{outline:2px solid #5b1d0e;outline-offset:2px}

@media (hover:hover){
  .board .clip:hover{transform:rotate(0deg) translateY(-3px)}
  .board .clip:hover .clip-f img{transform:scale(1.03)}
}
@media (min-width:700px){
  .board{--fr:10px;--cols:2;--cw:356px;padding:34px 20px 28px}
  .board .clips{gap:38px 24px}
}
@media (min-width:900px){
  .board{--fr:12px;--sht-size:80px;padding:40px 28px 32px}
  .board::before{background-size:34px 34px}
  .board .clip{padding:13px 14px 18px}
  .board .pager{margin-top:36px}
}
@media (min-width:1180px){
  .sec-list .wrap{max-width:1400px}
  .board{--cols:3;--cw:350px;padding:44px 34px 36px}
  .board .clips{gap:42px 30px}
  .board[data-n="2"],.related .board{--cols:2}
}